fix: export Link component

mondaycom · May 11, 2021 · a37d4c7 · a37d4c7
1 parent b6bb726
commit a37d4c7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/general-stories/colors/ColorItem.scss b/src/general-stories/colors/ColorItem.scss
@@ -1,3 +1,20 @@
+.content-color {
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 var(--spacing-small);
+  .color-element {
+    height: 100%;
+  }
+  .color-name {
+    padding: 0 8px;
+    color: var(--primary-text-color);
+    flex-grow: 1;
+  }
+}
+
 .color-item-component {
   width: 100%;
   height: 115px;

diff --git a/src/general-stories/colors/colors.stories.js b/src/general-stories/colors/colors.stories.js
@@ -127,7 +127,7 @@ function ContentColors({ color, isFirst, isLast }) {
 
 const ContentColorItem = ({ color }) => {
   return (
-    <section className="color-item-component">
+    <section className="content-color">
       <div className="color-name" style={{ width: "200px" }}>
         <span style={{ padding: "0 8px", fontSize: "16px" }}>--color-{color}</span>
       </div>
@@ -138,7 +138,8 @@ const ContentColorItem = ({ color }) => {
           height: "100%",
           backgroundColor: "var(--primary-background-color)",
           display: "flex",
-          alignItems: "center"
+          alignItems: "center",
+          padding: "0 8px"
         }}
       >
         <ContentColors color={color} isFirst />
@@ -149,7 +150,8 @@ const ContentColorItem = ({ color }) => {
           height: "100%",
           backgroundColor: "var(--primary-background-color)",
           display: "flex",
-          alignItems: "center"
+          alignItems: "center",
+          padding: "0 8px"
         }}
       >
         <ContentColors color={color} />
@@ -161,7 +163,8 @@ const ContentColorItem = ({ color }) => {
           height: "100%",
           backgroundColor: "var(--primary-background-color)",
           display: "flex",
-          alignItems: "center"
+          alignItems: "center",
+          padding: "0 8px"
         }}
       >
         <ContentColors color={color} isLast />
@@ -195,7 +198,7 @@ export const Colors = () => {
       <div className="colors-container">
         <div className="themes-icon-container">
           <div className="theme-name-spacer">Color Keys</div>
-          <span className="theme-container">
+          <span className="theme-container light-app-theme">
             <Sun className="theme-icon" /> Light
           </span>
           <span className="theme-container dark-app-theme">
@@ -219,6 +222,20 @@ export const Colors = () => {
         gives understanding and indication of orientation and belonging. The board’s main strength is its simple and
         visual appearance. That’s why the status colors should appear on the board and nowhere else in the UI.
       </DescriptionLabel>
+      <div className="colors-container">
+        <div className="themes-icon-container">
+          <div className="theme-name-spacer">Color Keys</div>
+          <span className="theme-container light-app-theme" style={{ width: "175px" }}>
+            <Sun className="theme-icon" /> Light
+          </span>
+          <span className="theme-container dark-app-theme" style={{ width: "175px" }}>
+            <Moon className="theme-icon" /> Dark
+          </span>
+          <span className="theme-container black-app-theme" style={{ width: "175px" }}>
+            <Bolt className="theme-icon" /> Dark
+          </span>
+        </div>
+      </div>
       {contentColors.map(color => {
         return <ContentColorItem color={color} />;
       })}

diff --git a/src/published-components.js b/src/published-components.js
@@ -46,7 +46,8 @@ const publishedComponents = {
   useDebounceEvent: "/src/hooks/useDebounceEvent.js",
   useClickOutside: "/src/hooks/useClickOutside.js",
   useResizeObserver: "/src/hooks/useResizeObserver.js",
-  allIcons: "/src/components/Icon/Icons"
+  allIcons: "/src/components/Icon/Icons",
+  Link: "/src/components/Link/Link.jsx"
 };
 
 function getPublishedComponents(dirPath = "") {