@channel.io/snippet - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

build/cjs.js

@@ -145,3 +145,3 @@ 'use strict';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  height: 100%;\n"]);
+  var data = _taggedTemplateLiteral(["\n  height: 100%;\n  padding: 8px 0;\n"]);
 
@@ -343,3 +343,3 @@ _templateObject = function _templateObject() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 6px;\n"]);
 
@@ -473,3 +473,3 @@ _templateObject$2 = function _templateObject() {
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid ", ";\n  margin: 0 0 8px 0;\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid ", ";\n  margin: 8px 0;\n"]);
 
@@ -537,3 +537,3 @@ _templateObject$3 = function _templateObject() {
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 32px;\n  padding: 7px 16px;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: bold;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 32px;\n  padding: 7px 16px;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: normal;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
 
@@ -568,3 +568,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  position: absolute;\n  max-height: ", "px;\n  overflow-y: auto;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px 0 ", ", 0 0 0 1px ", ";\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  padding: 8px 0;\n  position: absolute;\n  max-height: 345px;\n  overflow-y: auto;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px 0 ", ", 0 0 0 1px ", ";\n  ", "\n"]);
 
@@ -633,5 +633,3 @@ _templateObject5 = function _templateObject5() {
 });
-var OptionWrapper = styled__default.div(_templateObject5(), Colors$1.White, function (props) {
-  return props.maxHeight;
-}, Colors$1.Black20, Colors$1.Black5, function (props) {
+var OptionWrapper = styled__default.div(_templateObject5(), Colors$1.White, Colors$1.Black20, Colors$1.Black5, function (props) {
   return props.toTop ? styled.css(_templateObject6()) : styled.css(_templateObject7());
@@ -644,4 +642,2 @@ });
 
-var MARGIN_BOTTOM = 10;
-
 function Dropdown(_ref) {
@@ -655,22 +651,17 @@ var id = _ref.id,
 
-  var _useState = React.useState(0),
+  var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      maxHeight = _useState2[0],
-      setMaxHeight = _useState2[1];
+      show = _useState2[0],
+      setShow = _useState2[1];
 
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      show = _useState4[0],
-      setShow = _useState4[1];
+      toTop = _useState4[0],
+      setToTop = _useState4[1];
 
   var _useState5 = React.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      toTop = _useState6[0],
-      setToTop = _useState6[1];
+      hasError = _useState6[0],
+      setHasError = _useState6[1];
 
-  var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      hasError = _useState8[0],
-      setHasError = _useState8[1];
-
   var wrapperRef = React.useRef(null);
@@ -742,4 +733,2 @@ var targetRef = React.useRef(null);
     var isTopSpaceBigger = topSpaceHeight > bottomSpaceHeight;
-    var maxSpaceHeight = isTopSpaceBigger ? topSpaceHeight : bottomSpaceHeight;
-    setMaxHeight(maxSpaceHeight - MARGIN_BOTTOM);
     setToTop(isTopSpaceBigger);
@@ -779,6 +768,5 @@ setShow(true);
       ref: optionRef,
-      maxHeight: maxHeight,
       toTop: toTop
     }, optionItems);
-  }, [show, maxHeight, optionItems, toTop]);
+  }, [show, optionItems, toTop]);
   var isDisabled = React.useMemo(function () {
@@ -839,3 +827,3 @@ return submitting || (isBoolean(disabled) ? disabled : false);
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: inherit;\n  width: 100%;\n  padding: 6px 8px;\n  border: solid 1px ", ";\n  border-radius: 3px;\n  font-size: 14px;\n  line-height: 18px;\n  color: ", ";\n  background-color: ", ";\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: inherit;\n  width: 100%;\n  height: 30px;\n  padding: 5px 8px;\n  border: solid 1px ", ";\n  border-radius: 3px;\n  font-size: 14px;\n  line-height: 18px;\n  color: ", ";\n  background-color: ", ";\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"]);
 
@@ -850,3 +838,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$3() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  font-weight: bold;\n  line-height: 18px;\n  margin-bottom: 3px;\n  margin-left: ", "px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: block;\n  color: ", ";\n  font-size: 13px;\n  font-weight: bold;\n  line-height: 18px;\n  margin-bottom: 3px;\n  margin-left: ", "px;\n"]);
 
@@ -861,3 +849,3 @@ _templateObject2$3 = function _templateObject2() {
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 6px;\n"]);
 
@@ -870,3 +858,3 @@ _templateObject$5 = function _templateObject() {
 }
-var TEXT_LEFT_MARGIN = 5;
+var TEXT_LEFT_MARGIN = 3;
 var Wrapper$3 = styled__default.div(_templateObject$5());
@@ -951,3 +939,3 @@ var Label$2 = styled__default.label(_templateObject2$3(), Colors$1.Grey900, TEXT_LEFT_MARGIN);
 function _templateObject2$4() {
-  var data = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 3px;\n  overflow: hidden;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 5px;\n  overflow: hidden;\n"]);
 
@@ -962,3 +950,3 @@ _templateObject2$4 = function _templateObject2() {
 function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin: 6px 0;\n"]);
 
@@ -1021,3 +1009,3 @@ _templateObject$6 = function _templateObject() {
 function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 6px;\n"]);
 
@@ -1063,3 +1051,3 @@ _templateObject$7 = function _templateObject() {
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteral(["\n  flex: none;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  border-radius: 6px;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-image: url(", ");\n"]);
+  var data = _taggedTemplateLiteral(["\n  flex: none;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-image: url(", ");\n"]);
 
@@ -1209,3 +1197,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject$9() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 6px;\n"]);
 
@@ -1307,3 +1295,3 @@ _templateObject$9 = function _templateObject() {
 function _templateObject$b() {
-  var data = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n  white-space: pre-line;\n  text-align: ", ";\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n  white-space: pre-line;\n  text-align: ", ";\n  padding: 0 14px;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"]);
 
@@ -1368,2 +1356,26 @@ _templateObject$b = function _templateObject() {
 
+function getMarginTop(style) {
+  switch (style) {
+    case TextStyles$1.H1:
+      return 6;
+
+    case TextStyles$1.H2:
+    case TextStyles$1.Paragraph:
+    default:
+      return 4;
+  }
+}
+
+function getMarginBottom(style) {
+  switch (style) {
+    case TextStyles$1.H1:
+      return 6;
+
+    case TextStyles$1.H2:
+    case TextStyles$1.Paragraph:
+    default:
+      return 3;
+  }
+}
+
 var Text = styled__default.div(_templateObject$b(), function (props) {
@@ -1377,2 +1389,6 @@ return getFontSize(props.textStyle);
   return getAlign(props.align);
+}, function (props) {
+  return getMarginTop(props.textStyle);
+}, function (props) {
+  return getMarginBottom(props.textStyle);
 });
@@ -1379,0 +1395,0 @@

build/components/Dropdown/Dropdown.styled.d.ts

 interface OptionWrapperProps {
-    maxHeight: number;
     toTop: boolean;
@@ -4,0 +3,0 @@ }

build/esm.js

@@ -139,3 +139,3 @@ import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useReducer, useEffect } from 'react';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  height: 100%;\n"]);
+  var data = _taggedTemplateLiteral(["\n  height: 100%;\n  padding: 8px 0;\n"]);
 
@@ -337,3 +337,3 @@ _templateObject = function _templateObject() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 6px;\n"]);
 
@@ -467,3 +467,3 @@ _templateObject$2 = function _templateObject() {
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid ", ";\n  margin: 0 0 8px 0;\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid ", ";\n  margin: 8px 0;\n"]);
 
@@ -531,3 +531,3 @@ _templateObject$3 = function _templateObject() {
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 32px;\n  padding: 7px 16px;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: bold;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 32px;\n  padding: 7px 16px;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: normal;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
 
@@ -562,3 +562,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  position: absolute;\n  max-height: ", "px;\n  overflow-y: auto;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px 0 ", ", 0 0 0 1px ", ";\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  padding: 8px 0;\n  position: absolute;\n  max-height: 345px;\n  overflow-y: auto;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px 0 ", ", 0 0 0 1px ", ";\n  ", "\n"]);
 
@@ -627,5 +627,3 @@ _templateObject5 = function _templateObject5() {
 });
-var OptionWrapper = styled.div(_templateObject5(), Colors$1.White, function (props) {
-  return props.maxHeight;
-}, Colors$1.Black20, Colors$1.Black5, function (props) {
+var OptionWrapper = styled.div(_templateObject5(), Colors$1.White, Colors$1.Black20, Colors$1.Black5, function (props) {
   return props.toTop ? css(_templateObject6()) : css(_templateObject7());
@@ -638,4 +636,2 @@ });
 
-var MARGIN_BOTTOM = 10;
-
 function Dropdown(_ref) {
@@ -649,22 +645,17 @@ var id = _ref.id,
 
-  var _useState = useState(0),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      maxHeight = _useState2[0],
-      setMaxHeight = _useState2[1];
+      show = _useState2[0],
+      setShow = _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      show = _useState4[0],
-      setShow = _useState4[1];
+      toTop = _useState4[0],
+      setToTop = _useState4[1];
 
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      toTop = _useState6[0],
-      setToTop = _useState6[1];
+      hasError = _useState6[0],
+      setHasError = _useState6[1];
 
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      hasError = _useState8[0],
-      setHasError = _useState8[1];
-
   var wrapperRef = useRef(null);
@@ -736,4 +727,2 @@ var targetRef = useRef(null);
     var isTopSpaceBigger = topSpaceHeight > bottomSpaceHeight;
-    var maxSpaceHeight = isTopSpaceBigger ? topSpaceHeight : bottomSpaceHeight;
-    setMaxHeight(maxSpaceHeight - MARGIN_BOTTOM);
     setToTop(isTopSpaceBigger);
@@ -773,6 +762,5 @@ setShow(true);
       ref: optionRef,
-      maxHeight: maxHeight,
       toTop: toTop
     }, optionItems);
-  }, [show, maxHeight, optionItems, toTop]);
+  }, [show, optionItems, toTop]);
   var isDisabled = useMemo(function () {
@@ -833,3 +821,3 @@ return submitting || (isBoolean(disabled) ? disabled : false);
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: inherit;\n  width: 100%;\n  padding: 6px 8px;\n  border: solid 1px ", ";\n  border-radius: 3px;\n  font-size: 14px;\n  line-height: 18px;\n  color: ", ";\n  background-color: ", ";\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: inherit;\n  width: 100%;\n  height: 30px;\n  padding: 5px 8px;\n  border: solid 1px ", ";\n  border-radius: 3px;\n  font-size: 14px;\n  line-height: 18px;\n  color: ", ";\n  background-color: ", ";\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"]);
 
@@ -844,3 +832,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$3() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  font-weight: bold;\n  line-height: 18px;\n  margin-bottom: 3px;\n  margin-left: ", "px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: block;\n  color: ", ";\n  font-size: 13px;\n  font-weight: bold;\n  line-height: 18px;\n  margin-bottom: 3px;\n  margin-left: ", "px;\n"]);
 
@@ -855,3 +843,3 @@ _templateObject2$3 = function _templateObject2() {
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 6px;\n"]);
 
@@ -864,3 +852,3 @@ _templateObject$5 = function _templateObject() {
 }
-var TEXT_LEFT_MARGIN = 5;
+var TEXT_LEFT_MARGIN = 3;
 var Wrapper$3 = styled.div(_templateObject$5());
@@ -945,3 +933,3 @@ var Label$2 = styled.label(_templateObject2$3(), Colors$1.Grey900, TEXT_LEFT_MARGIN);
 function _templateObject2$4() {
-  var data = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 3px;\n  overflow: hidden;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 5px;\n  overflow: hidden;\n"]);
 
@@ -956,3 +944,3 @@ _templateObject2$4 = function _templateObject2() {
 function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin: 6px 0;\n"]);
 
@@ -1015,3 +1003,3 @@ _templateObject$6 = function _templateObject() {
 function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 6px;\n"]);
 
@@ -1057,3 +1045,3 @@ _templateObject$7 = function _templateObject() {
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteral(["\n  flex: none;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  border-radius: 6px;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-image: url(", ");\n"]);
+  var data = _taggedTemplateLiteral(["\n  flex: none;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-image: url(", ");\n"]);
 
@@ -1203,3 +1191,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject$9() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  margin-bottom: 6px;\n"]);
 
@@ -1301,3 +1289,3 @@ _templateObject$9 = function _templateObject() {
 function _templateObject$b() {
-  var data = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n  white-space: pre-line;\n  text-align: ", ";\n  padding: 0 14px;\n  margin-bottom: 8px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n  white-space: pre-line;\n  text-align: ", ";\n  padding: 0 14px;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"]);
 
@@ -1362,2 +1350,26 @@ _templateObject$b = function _templateObject() {
 
+function getMarginTop(style) {
+  switch (style) {
+    case TextStyles$1.H1:
+      return 6;
+
+    case TextStyles$1.H2:
+    case TextStyles$1.Paragraph:
+    default:
+      return 4;
+  }
+}
+
+function getMarginBottom(style) {
+  switch (style) {
+    case TextStyles$1.H1:
+      return 6;
+
+    case TextStyles$1.H2:
+    case TextStyles$1.Paragraph:
+    default:
+      return 3;
+  }
+}
+
 var Text = styled.div(_templateObject$b(), function (props) {
@@ -1371,2 +1383,6 @@ return getFontSize(props.textStyle);
   return getAlign(props.align);
+}, function (props) {
+  return getMarginTop(props.textStyle);
+}, function (props) {
+  return getMarginBottom(props.textStyle);
 });
@@ -1373,0 +1389,0 @@

package.json

 {
   "name": "@channel.io/snippet",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "channel.io snippet components",
@@ -5,0 +5,0 @@ "main": "build/cjs.js",

README.md

 # Channel Snippet
 [Channel](https://channel.io)'s snippet components
 
+* [Docs](https://developers.channel.io/docs/what-is-snippet)
+* [Builder](https://snippet-builder.channel.io/)
 * [Storybook](https://zoyi.github.io/channel-snippet-web)
@@ -5,0 +7,0 @@

src/components/Button/Button.styled.ts

@@ -43,3 +43,3 @@ /* External dependencies */
   padding: 0 14px;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 `
@@ -46,0 +46,0 @@

src/components/Divider/Divider.styled.ts

@@ -10,3 +10,3 @@ /* External dependencies */
   border-top: 1px solid ${Colors.Grey300};
-  margin: 0 0 8px 0;
+  margin: 8px 0;
 `

src/components/Dropdown/Dropdown.styled.ts

@@ -8,3 +8,2 @@ /* External dependencies */
 interface OptionWrapperProps {
-  maxHeight: number,
   toTop: boolean,
@@ -62,4 +61,5 @@ }
   background-color: ${Colors.White};
+  padding: 8px 0;
   position: absolute;
-  max-height: ${(props) => (props.maxHeight)}px;
+  max-height: 345px;
   overflow-y: auto;
@@ -81,3 +81,3 @@ border-radius: 8px;
   line-height: 18px;
-  font-weight: bold;
+  font-weight: normal;
   cursor: pointer;
@@ -84,0 +84,0 @@

src/components/Image/Image.styled.ts

@@ -6,3 +6,3 @@ /* External dependencies */
   padding: 0 14px;
-  margin-bottom: 8px;
+  margin: 6px 0;
 `
@@ -14,4 +14,4 @@
   height: auto;
-  border-radius: 3px;
+  border-radius: 5px;
   overflow: hidden;
 `

src/components/Input/Input.styled.ts

@@ -11,12 +11,13 @@ /* External dependencies */
 
-const TEXT_LEFT_MARGIN = 5
+const TEXT_LEFT_MARGIN = 3
 
 export const Wrapper = styled.div`
   padding: 0 14px;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 `
 
 export const Label = styled.label`
+  display: block;
   color: ${Colors.Grey900};
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
@@ -31,3 +32,4 @@ line-height: 18px;
   width: 100%;
-  padding: 6px 8px;
+  height: 30px;
+  padding: 5px 8px;
   border: solid 1px ${(props) => (props.hasError ? Colors.Orange200 : Colors.Grey300)};
@@ -34,0 +36,0 @@ border-radius: 3px;

src/components/KeyValue/KeyValue.styled.ts

@@ -8,3 +8,3 @@ /* External dependencies */
 export const Wrapper = styled.div`
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 `
@@ -11,0 +11,0 @@

src/components/ListItem/ListItem.styled.ts

@@ -82,3 +82,3 @@ /* External dependencies */
   height: 40px;
-  border-radius: 6px;
+  border-radius: 5px;
   background-repeat: no-repeat;
@@ -85,0 +85,0 @@ background-size: cover;

src/components/Text/Text.styled.ts

@@ -60,2 +60,24 @@ /* External dependencies */
 
+function getMarginTop(style?: string): number {
+  switch (style) {
+    case TextStyles.H1:
+      return 6
+    case TextStyles.H2:
+    case TextStyles.Paragraph:
+    default:
+      return 4
+  }
+}
+
+function getMarginBottom(style?: string): number {
+  switch (style) {
+    case TextStyles.H1:
+      return 6
+    case TextStyles.H2:
+    case TextStyles.Paragraph:
+    default:
+      return 3
+  }
+}
+
 export const Text = styled.div<TextProps>`
@@ -68,3 +90,4 @@ font-size: ${(props) => getFontSize(props.textStyle)}px;
   padding: 0 14px;
-  margin-bottom: 8px;
+  margin-top: ${(props) => getMarginTop(props.textStyle)}px;
+  margin-bottom: ${(props) => getMarginBottom(props.textStyle)}px;
 `

src/containers/ContainerRefProvider/ContainerRefProvider.styled.ts

@@ -5,2 +5,3 @@ import styled from 'styled-components'
   height: 100%;
+  padding: 8px 0;
 `

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

290549

increased by0.72%

Lines of code

4865

increased by1.19%

Number of lines in readme file

16

increased by14.29%

No dependency changes