Fix styled compo lint

Signed-off-by: soupette <cyril.lpz@gmail.com>
strapi · Apr 22, 2020 · 8dcaf1b · 8dcaf1b
1 parent 8240243
commit 8dcaf1b
Show file tree

Hide file tree

Showing 26 changed files with 51 additions and 73 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -5,5 +5,9 @@
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components"
-  ]
+  ],
+  "rules": {
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null
+  }
 }
diff --git a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js
@@ -12,10 +12,6 @@ const GlobalStyle = createGlobalStyle`
     color: #292b2c;
   }
 
-  // ::-webkit-scrollbar {
-  //   width: 0;
-  // }
-
   * {
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
@@ -137,7 +133,6 @@ const GlobalStyle = createGlobalStyle`
   }
 
 
-  // scrollbar
   ::-webkit-scrollbar {
     width: 9px;
   }
@@ -163,13 +158,13 @@ const GlobalStyle = createGlobalStyle`
     display: none;
   }
 
-  // firefox scrollbar
+  /* firefox scrollbar */
+  /* stylelint-disable */
   * {
     scrollbar-color: #bbb #eee;
     scrollbar-width: thin;
   }
-
-
+  /* stylelint-enable */
 `;
 
 export default GlobalStyle;
diff --git a/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js
@@ -15,7 +15,6 @@ const Wrapper = styled.div`
 
   .projectName {
     display: block;
-    height: 100%;
     width: 100%;
     text-align: center;
     height: ${props => props.theme.main.sizes.leftMenu.height};

diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js
@@ -11,9 +11,6 @@ const Wrapper = styled.div`
   overflow-y: auto;
   height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 10.2rem));
   box-sizing: border-box;
-  // I am keeping these lines if we want to join the scrollbars again
-  // display: flex;
-  // flex-direction: column;
 
   .title {
     padding-left: 2rem;

diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js
@@ -1,10 +1,8 @@
 import styled from 'styled-components';
 
 const EmptyLinksListWrapper = styled.div`
-  padding: 0.8rem 0 0.7rem 2rem;
-  // padding-top: 0.8rem;
-  // padding-left: 2rem;
   margin-bottom: 0.1rem;
+  padding: 0.8rem 0 0.7rem 2rem;
   line-height: 18px;
 `;
 

diff --git a/packages/strapi-admin/admin/src/components/Notification/Li.js b/packages/strapi-admin/admin/src/components/Notification/Li.js
@@ -1,6 +1,8 @@
 import styled, { createGlobalStyle } from 'styled-components';
 import PropTypes from 'prop-types';
 
+/* eslint-disable indent */
+
 const GlobalNotification = createGlobalStyle`
 .notificationIcon {
   position: relative;
@@ -64,7 +66,7 @@ const GlobalNotification = createGlobalStyle`
 
 .notificationSuccess{
   background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
-  props.theme.main.colors.white};
+    props.theme.main.colors.white};
 }
 
 .notificationWarning {
@@ -83,23 +85,21 @@ const GlobalNotification = createGlobalStyle`
 
   .notificationIcon:before {
     padding-top: 4px;
-    border-color: $brand-danger; // red
+    border-color: $brand-danger;
     border-color: ${props => props.theme.main.colors.red};
     color: ${props => props.theme.main.colors.red};
   }
 }
 
 .notificationInfo {
   background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
-      props.theme.main.colors.white};
+    props.theme.main.colors.white};
 
   .notificationIcon:before {
     border-color: ${props => props.theme.main.colors.blue};
     color: ${props => props.theme.main.colors.blue};
   }
 }
-
-
 `;
 
 const Li = styled.li`
@@ -118,8 +118,6 @@ const Li = styled.li`
   z-index: 10;
   padding: 1rem;
 
-  // The last notification must appear from
-  // the background of the previous one.
   &:last-child {
     z-index: 1;
   }

diff --git a/packages/strapi-admin/admin/src/containers/App/components.js b/packages/strapi-admin/admin/src/containers/App/components.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-amily: 'Lato';
+  font-family: 'Lato';
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 1.5;

diff --git a/packages/strapi-admin/admin/src/containers/HomePage/components.js b/packages/strapi-admin/admin/src/containers/HomePage/components.js
@@ -105,8 +105,8 @@ const ALink = styled.a`
   }
 
   &:hover,
-  focus,
-  active {
+  :focus,
+  :active {
     text-decoration: none;
     outline: 0;
   }
@@ -179,8 +179,8 @@ const LinkWrapper = styled.a`
   background-color: #f7f8f8;
 
   &:hover,
-  focus,
-  active {
+  :focus,
+  :active {
     text-decoration: none;
     outline: 0;
   }

diff --git a/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js b/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
   width: ${props => props.theme.main.sizes.leftMenu.width};
   background: ${props => props.theme.main.colors.strapi['blue-darker']};
 
-  // scrollbar overrides
+  /* scrollbar overrides */
   * {
     ::-webkit-scrollbar {
       width: 7px;
@@ -35,7 +35,7 @@ const Wrapper = styled.div`
       background-color: ${props => props.theme.main.colors.leftMenu['link-color']};
     }
 
-    // firefox
+    /* firefox */
     scrollbar-color: ${props => props.theme.main.colors.leftMenu['title-color']} transparent;
   }
 `;

diff --git a/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js b/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js
@@ -72,7 +72,6 @@ const Wrapper = styled.div`
     border: none !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
-    overflow: hidden;
     box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
 
     &:before {

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js
@@ -1,22 +1,22 @@
 import styled from 'styled-components';
 import getColor from './utils/getColor';
 
+/* eslint-disable indent */
+
 const RemoveWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
   width: 30px;
   text-align: center;
   background-color: ${({ isOverEditBlock, isOverRemove, isSelected }) =>
-  getColor(isOverRemove, isSelected, isOverEditBlock)};
+    getColor(isOverRemove, isSelected, isOverEditBlock)};
   cursor: pointer;
 
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  right: 0;
-
   svg {
     align-self: center;
     color: #b4b6ba;

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
     }
   }
   > p {
-    width 100%;
+    width: 100%;
     padding-top: 14px;
     font-size: 1.2rem;
     line-height: normal;

diff --git a/...pi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js b/...pi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js
@@ -94,7 +94,6 @@ const MediaPreviewFile = styled(MediaPreviewItem)`
     position: absolute;
     left: 120%;
     bottom: -10px;
-    display: none;
     max-width: 150px;
     color: #333740;
   }

diff --git a/...s/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js b/...s/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js
@@ -90,7 +90,7 @@ const BannerWrapper = styled.button`
   }}
 
   &:focus {
-    outline: 0;;
+    outline: 0;
   }
 
 
@@ -164,7 +164,7 @@ const BannerWrapper = styled.button`
     `;
   }}
 
-  webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 
   > div {
     align-self: center;

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
@@ -92,14 +92,12 @@ const Li = styled.li`
   > div {
     width: 90%;
     > a {
+      max-width: 100%;
       color: rgb(35, 56, 77);
     }
     > a:hover {
       text-decoration: none;
     }
-    > a {
-      max-width: 100%;
-    }
 
     &:first-of-type {
       display: flex;

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js
@@ -26,7 +26,7 @@ const Wrapper = styled.div`
       flex-wrap: initial;
       padding: 0 10px;
 
-      // Arrow
+      /* Arrow */
       &:before {
         content: '\f0d7';
         position: absolute;
@@ -40,7 +40,7 @@ const Wrapper = styled.div`
       > div {
         padding: 0;
         &:first-of-type {
-          // Placeholder
+          /* Placeholder */
           > div span {
             color: #aaa;
           }

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js
@@ -6,9 +6,6 @@ const PreviewControlWrapper = styled.div`
   width: 100%;
   padding: 0 17px;
   justify-content: space-between;
-  background-color: #fafafb;
-  line-height: 30px;
-  font-size: 12px;
   font-family: Lato;
   background-color: #fff;
   border-bottom: 1px solid #f3f4f4;

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js
@@ -13,7 +13,6 @@ const PreviewWysiwygWrapper = styled.div`
   font-family: 'Lato';
   cursor: text;
 
-  // TODO define rules for header's margin
   h1,
   h2,
   h3,
@@ -71,7 +70,6 @@ const PreviewWysiwygWrapper = styled.div`
     padding-left: 20px;
   }
 
-  // NOTE: we might need this later
   span {
     white-space: pre-line;
   }

diff --git a/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   padding-bottom: 2.4rem;
   font-size: 1.3rem;
-  font-family: 'Lato'; 
+  font-family: 'Lato';
   label {
     display: block;
     margin-bottom: 1rem;
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
     }
   }
   > div + p {
-    width 100%;
+    width: 100%;
     padding-top: 12px;
     font-size: 1.2rem;
     line-height: normal;

diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js
@@ -3,7 +3,6 @@ import { DropdownMenu } from 'reactstrap';
 
 const MenuDropdown = styled(DropdownMenu)`
   max-height: 180px;
-  // min-width: calc(100% + 2px);
   min-width: 230px;
   margin-left: -1px;
   margin-top: -1px;

diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js
@@ -20,20 +20,21 @@ const AddFilterCta = styled(Button)`
   margin-right: 10px;
   padding: 0 10px;
   text-align: center;
-  background-color: #FFFFFF;
-  border: 1px solid #E3E9F3;
+  background-color: #ffffff;
+  border: 1px solid #e3e9f3;
   border-radius: 2px;
   line-height: 28px;
   font-size: 13px;
   font-weight: 500;
   font-family: Lato;
-  -webkit-font-smoothing-antialiased;
+  -webkit-font-smoothing: antialiased;
   cursor: pointer;
   &:hover {
-    background: #F7F8F8;
+    background: #f7f8f8;
   }
-  &:focus, &:active {
-    outline:0;
+  &:focus,
+  &:active {
+    outline: 0;
   }
   > span {
     margin-left: 10px;
@@ -92,7 +93,6 @@ const FilterWrapper = styled.div`
   }
 
   -webkit-font-smoothing: antialiased;
-  font-size: 13px;
 `;
 
 const Separator = styled.span`