@xaypay/tui 0.0.54 → 0.0.55

package/src/components/input/index.js

@@ -3,16 +3,19 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import { Typography } from "../typography";
 import { compereConfigs } from "./../../utils";
+import styled, { keyframes, css } from 'styled-components';
 
 import styles from "./input.module.css";
 
 export const InputTypes = {
+    TEL: 'tel',
     TEXT: "text",
     PASSWORD: "password",
 };
 
 export const Input = ({
     type,
+    size,
     name,
     color,
     label,
@@ -20,25 +23,39 @@ export const Input = ({
     width,
     height,
     radius,
-    border,
     padding,
     tooltip,
-    bgColor,
     leftIcon,
-    fontSize,
     required,
     disabled,
     onChange,
+    transform,
     iconWidth,
     rightIcon,
     className,
     boxSizing,
     boxShadow,
-    errorMesage,
-    borderColor,
+    errorLeft,
+    errorSize,
+    labelSize,
+    labelColor,
+    errorColor,
     placeholder,
+    errorZindex,
+    errorBottom,
+    labelWeight,
+    errorMessage,
     autoComplete,
+    labelDisplay,
+    errorPosition,
     boxShadowHover,
+    errorClassName,
+    errorAnimation,
+    errorLineHeight,
+    labelLineHeight,
+    backgroundColor,
+    labelMarginBottom,
+    errorAnimationDuration,
     ...props
 }) => {
     const [show, setShow] = useState(false);
@@ -48,7 +65,7 @@ export const Input = ({
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
     const classProps = classnames(
-        className
+        className ? className : configStyles.INPUT.className
     );
 
     const handleChange = (event) => {
@@ -63,10 +80,39 @@ export const Input = ({
         setIsHover(false);
     };
     
+    const errorShow = keyframes`
+        100% {
+            bottom: '-20px';
+            transform: scale3d(1,1,1);
+            -webkit-transform: scale3d(1,1,1);
+            -moz-transform: scale3d(1,1,1);
+            -ms-transform: scale3d(1,1,1);
+            -o-transform: scale3d(1,1,1);
+        }
+    `;
+
+    const animation = _ => css`
+        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
+    `;
+
+    const P = styled.p`
+        animation: ${errorAnimation ? animation : 'none'};
+    `;
+    
     return (
         <div className={`${styles["input-wrap"]}`}>
             {
-                label ? <label className={`${styles["input-title"]}`}>
+                label ? <label
+                    className={`${styles["input-title"]}`}
+                    style={{
+                        color: labelColor ? labelColor : configStyles.INPUT.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
+                        display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
+                        fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
+                        lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
+                        marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+                    }}
+                >
                     {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
                 </label>
                 : ''
@@ -75,30 +121,49 @@ export const Input = ({
                 className={`${styles["input-content"]}`}
                 style={{
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
-                    boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                    boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             >
                 {
-                    leftIcon && leftIcon.length > 0 ?
-                    <div
-                        onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
-                        onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
-                        onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
-                        style={{
-                            cursor: type === 'password' ? 'pointer' : 'default',
-                            height: height ? height : configStyles.INPUT.height,
-                            padding: padding ? padding : configStyles.INPUT.padding,
-                            width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
-                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                            borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                            borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
-                        }}
-                    >
-                        {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
-                    </div> : ''
+                    leftIcon && leftIcon.length > 0 && type != 'tel' ?
+                        <div
+                            onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
+                            onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
+                            onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                            style={{
+                                cursor: type === 'password' ? 'pointer' : 'default',
+                                height: height ? height : configStyles.INPUT.height,
+                                padding: padding ? padding : configStyles.INPUT.padding,
+                                width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                            }}
+                        >
+                            {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
+                        </div> : ''
+                }
+                {
+                    type === 'tel' ?
+                        <div
+                            style={{
+                                pointerEvents: disabled ? 'none' : 'auto',
+                                fontSize: size ? size : configStyles.INPUT.size,
+                                height: height ? height : configStyles.INPUT.height,
+                                padding: padding ? padding : configStyles.INPUT.padding,
+                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                                color: errorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                            }}
+                        >
+                            +374
+                        </div>
+                    : ''
                 }
                 <input
                     {...props}
@@ -115,13 +180,13 @@ export const Input = ({
                         outline: 'none',
                         pointerEvents: disabled ? 'none' : 'auto',
                         width: width ? width : configStyles.INPUT.width,
+                        fontSize: size ? size : configStyles.INPUT.size,
                         height: height ? height : configStyles.INPUT.height,
                         padding: padding ? padding : configStyles.INPUT.padding,
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
-                        fontSize: fontSize ? fontSize : configStyles.INPUT.fontSize,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                        color: errorMesage ? 'rgba(238, 0, 0, 1)' : color ? color : configStyles.INPUT.color,
-                        backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,                       
+                        backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,                       
+                        color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                     }}
                 />
                 {
@@ -132,14 +197,13 @@ export const Input = ({
                         onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
                         style={{
                             cursor: type === 'password' ? 'pointer' : 'default',
-                            border: border ? border : configStyles.INPUT.border,
                             height: height ? height : configStyles.INPUT.height,
                             padding: padding ? padding : configStyles.INPUT.padding,
                             width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
                             boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                             borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
                             borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
-                            backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor,
+                            backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
                         }}
                     >
                         {type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]}
@@ -152,7 +216,25 @@ export const Input = ({
                 </Typography> : null
             }
             {tooltipStatus ? <p>{tooltip}</p> : null}
-            {errorMesage ? <span className={styles.inputErrorMessages}>{errorMesage}</span> : ""}
+            {
+                errorMessage ?
+                    <P
+                        style={{
+                            left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
+                            color: errorColor ? errorColor : configStyles.INPUT.errorColor,
+                            fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
+                            bottom: errorBottom ? errorBottom : configStyles.INPUT.errorBottom,
+                            zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
+                            position: errorPosition ? errorPosition : configStyles.INPUT.errorPosition,
+                            lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+                            transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform,
+                        }}
+                        className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
+                    >
+                        {errorMessage}
+                    </P> 
+                    : ''
+            }
         </div>
     );
 };
@@ -168,17 +250,35 @@ Input.propTypes = {
     disabled: PropTypes.bool,
     height: PropTypes.string,
     radius: PropTypes.string,
-    bgColor: PropTypes.string,
+    padding: PropTypes.string,
     fontSize: PropTypes.string,
     tooltip: PropTypes.element,
+    transform: PropTypes.string,
     className: PropTypes.string,
     iconWidth: PropTypes.string,
     boxSizing: PropTypes.string,
     boxShadow: PropTypes.string,
+    errorSize: PropTypes.string,
+    errorLeft: PropTypes.string,
+    labelSize: PropTypes.string,
+    errorColor: PropTypes.string,
+    labelColor: PropTypes.string,
     placeholder: PropTypes.string,
-    errorMesage: PropTypes.string,
+    errorZindex: PropTypes.string,
+    errorBottom: PropTypes.string,
+    labelWeight: PropTypes.string,
+    errorMessage: PropTypes.string,
     autoComplete: PropTypes.string,
+    errorAnimation: PropTypes.bool,
+    labelDisplay: PropTypes.string,
+    errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
+    errorClassName: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    errorLineHeight: PropTypes.string,
+    labelLineHeight: PropTypes.string,
+    labelMarginBottom: PropTypes.string,
+    errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),
     type: PropTypes.oneOf(Object.values(InputTypes)),

package/src/components/input/input.module.css

@@ -1,5 +1,6 @@
 .input-wrap {
     width: 100%;
+    position: relative;
 }
 
 .input-content {
@@ -7,24 +8,25 @@
     width: 100%;
 }
 
-.input-title {
-    display: block;
-    font-size: 16px;
-    color: #3c393e;
-    font-weight: 500;
-    line-height: 22px;
-    margin-bottom: 6px;
-}
-
-.inputErrorMessages {
-    font-size: 14px;
-    line-height: 19px;
-    color: rgba(238, 0, 0, 1);
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus, 
 input:-webkit-autofill:active  {
     background-color: inherit !important;
 }
+
+.error-message-show {
+    animation-name: error-show;
+    animation-fill-mode: forwards;
+}
+
+@keyframes error-show {
+    100% {
+        bottom: -20px;
+        transform: scale3d(1,1,1);
+        -webkit-transform: scale3d(1,1,1);
+        -moz-transform: scale3d(1,1,1);
+        -ms-transform: scale3d(1,1,1);
+        -o-transform: scale3d(1,1,1);
+    }
+}

package/src/components/typography/index.js

@@ -19,19 +19,49 @@ export const Typography = ({
 	size,
 	color,
 	weight,
-	onClick,
+	radius,
+	border,
+	cursor,
+	margin,
+	padding,
 	variant,
+	bgColor,
+	onClick,
 	children,
+	textAlign,
+	fontStyle,
 	className,
+	textShadow,
+	lineHeight,
+	colorHover,
+	fontFamily,
+	textTransform,
+	textDecoration,
 	...props
 }) => {
 	const configStyles = compereConfigs();
 	const classProps = classnames(className);
 
+	const [isHover, setIsHover] = useState(false);
 	const [validVariant, setValidVariant] = useState(false);
 	const [style, setStyle] = useState({
-		fontSize: size ? size : configStyles.TYPOGRAPHY['fSize'+variant],
-		fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight'+variant]
+		border: border ? border : configStyles.TYPOGRAPHY.border,
+		cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
+		borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
+		fontSize: size ? size : configStyles.TYPOGRAPHY['size'+variant],
+		margin: margin ? margin : configStyles.TYPOGRAPHY['margin'+variant],
+		fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight'+variant],
+		padding: padding ? padding : configStyles.TYPOGRAPHY['padding'+variant],
+		textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
+		textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign'+variant],
+		backgroundColor: bgColor ? bgColor : configStyles.TYPOGRAPHY['bgColor'+variant],
+		fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle'+variant],
+		lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight'+variant],
+		fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily'+variant],
+		textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform'+variant],
+		textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration'+variant],
+		color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+
 	});
 
 	useEffect(() => {
@@ -51,6 +81,14 @@ export const Typography = ({
 		}
 	}, [color]);
 
+	const handleMouseEnter = () => {
+		setIsHover(true);
+	};
+	  
+	const handleMouseLeave = () => {
+		setIsHover(false);
+	};
+
 	const tagT = React.createElement(
 		variant,
 		{
@@ -58,6 +96,9 @@ export const Typography = ({
 			...props,
 			className: classProps,
 			onClick: onClick ? onClick : _ => _,
+			onMouseEnter: handleMouseEnter,
+      		onMouseLeave: handleMouseLeave
+
 		},
 		[children]
 	);
@@ -70,8 +111,22 @@ export const Typography = ({
 Typography.propTypes = {
 	size: PropTypes.string,
 	color: PropTypes.string,
-	weight: PropTypes.string,
 	onClick: PropTypes.func,
+	weight: PropTypes.string,
+	border: PropTypes.string,
+	cursor: PropTypes.string,
+	margin: PropTypes.string,
+	radius: PropTypes.string,
+	bgColor: PropTypes.string,
+	padding: PropTypes.string,
+	textAlign: PropTypes.string,
 	className: PropTypes.string,
+	fontStyle: PropTypes.string,
+	lineHeight: PropTypes.string,
+	textShadow: PropTypes.string,
+	fontFamily: PropTypes.string,
+	colorHover: PropTypes.string,
+	textTransform: PropTypes.string,
+	textDecoration: PropTypes.string,
 	variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired,
 };

package/src/components/typography/typography.stories.js

@@ -9,10 +9,16 @@ export default {
 const staticTag = ['h1','h2','h3','h4','h5','h6','span','p']
 
 export const Template = (args) => <>
-    <Typography {...args} variant="h1">Dynamic Typography</Typography>
+    <Typography {...args}>Dynamic Typography</Typography>
 	{
 		staticTag.map((tag,key) => {
-			return <Typography key={key} variant={tag} color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}>{tag}</Typography>;
+			return <Typography
+				key={key}
+				variant={tag} 
+				color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}
+			>
+				{tag}
+			</Typography>;
 		})
 	}
 </>;

package/src/stories/Introduction.stories.mdx

@@ -1,17 +1,17 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Intro/Introduction" />
 
 <style>
-  {`
+    {`
     .subheading {
       --mediumdark: '#999999';
       font-weight: 900;
@@ -27,7 +27,7 @@ import StackAlt from './assets/stackalt.svg';
     .link-list {
       display: grid;
       grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
+      grid-template-rows: 1fr 0fr;
       row-gap: 10px;
     }
 
@@ -42,8 +42,8 @@ import StackAlt from './assets/stackalt.svg';
     @media all and (-ms-high-contrast:none) {
     .link-list {
         display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
+        -ms-grid-columns: 1fr 0fr;
+        -ms-grid-rows: 1fr 0fr;
       }
     }
 
@@ -114,98 +114,87 @@ import StackAlt from './assets/stackalt.svg';
   `}
 </style>
 
-# Welcome to Storybook
+# Welcome to TUI
 
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+TUI provides a lot of UI components to enrich your web applications, and we will improve components experience consistently
 
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+TUI is fully configurable. You can change color, size, border and etc... Yes. You can configurable what you want. box-shadow on hover as well )))) 
 
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
+    <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+        <img src={Plugin} alt="plugin" />
+        <span>
+            <strong>Presets for popular tools</strong>
+            Easy setup for TypeScript, SCSS and more.
+        </span>
+    </a>
+    <a className="link-item" href="../?path=/story/intro-configuration--page">
+        <img src={StackAlt} alt="Build" />
+        <span>
+            <strong>Build configuration</strong>
+            How to customize TUI
+        </span>
+    </a>
+    
 </div>
 
 <div className="subheading">Learn</div>
 
 <div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
+    <a className="link-item" href="../?path=/docs/intro-documentation--page">
+        <img src={Repo} alt="repo" />
+        <span>
+            <strong>TUI documentation</strong>
+            Configure, customize, and extend
+        </span>
+    </a>
+    <a className="link-item" href="http://gitlab.yerevan.am/rubo/tui" target="_blank">
+        <img src={Code} alt="code" />
+        <span>
+            <strong>GitHub project</strong>
+            View the source and add issues
+        </span>
+    </a>
 </div>
 
+<!--
+<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+        <img src={Direction} alt="direction" />
+        <span>
+            <strong>In-depth guides</strong>
+            Best practices from leading teams
+        </span>
+    </a>
+<a className="link-item" href="https://discord.gg/storybook" target="_blank">
+        <img src={Comments} alt="comments" />
+        <span>
+            <strong>Discord chat</strong>
+            Chat with maintainers and the community
+        </span>
+    </a> 
 <div className="tip-wrapper">
   <span className="tip">Tip</span>Edit the Markdown in{' '}
   <code>stories/Introduction.stories.mdx</code>
 </div>
+
+<a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
+        <img src={Colors} alt="colors" />
+        <span>
+            <strong>Styling</strong>
+            How to load and configure CSS libraries
+        </span>
+    </a>
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+        target="_blank"
+    >
+        <img src={Flow} alt="flow" />
+        <span>
+            <strong>Data</strong>
+            Providers and mocking for data libraries
+        </span>
+    </a>
+-->