@magnetis/astro - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+### [0.6.0] - 2019-04-05
+- New documentation theme.
+- Add icon components and create Iconography page.
+- Adjust tabs component to the new icon size classes (might require a check if you're using icons already)
+- Add textarea input type to Inputs page.
+- Add messaging input type to Inputs page.
+- Add icon buttons to Buttons page.
+
 ### [0.5.0] - 2019-03-18
@@ -7,0 +15,0 @@ - Breaking changes: Refactor disabled state of some components to standardize label and input order and their classes and attributes.

docs/js/inputs.js

 export const initFloatingLabel = () => {
   window.requestAnimationFrame(() => {
-    const inputs = document.querySelectorAll(".a-input");
+    const inputs = document.querySelectorAll('.a-input');
 
     const verifyValue = (input, label) => {
+      if (!label) return;
+
       if (input.value) {
-        label.classList.add("a-input--floating-label");
+        label.classList.add('a-input--floating-label');
       } else {
-        label.classList.remove("a-input--floating-label");
+        label.classList.remove('a-input--floating-label');
       }
@@ -14,12 +16,12 @@ };
     inputs.forEach(input => {
-      const currentInput = input.querySelector("input");
-      const currentLabel = input.querySelector("label");
+      const currentInput = input.firstChild;
+      const currentLabel = input.querySelector('label');
 
       verifyValue(currentInput, currentLabel);
 
-      currentInput.addEventListener("focus", () => {
+      currentInput.addEventListener('focus', () => {
         verifyValue(currentInput, currentLabel);
       });
 
-      currentInput.addEventListener("focusout", () => {
+      currentInput.addEventListener('focusout', () => {
         verifyValue(currentInput, currentLabel);
@@ -31,7 +33,47 @@ });
 
-const HandleFloatingLabel = () => {
+export const initMessagingInputEvent = () => {
+  window.requestAnimationFrame(() => {
+    const messagingInputs = document.querySelectorAll('.a-input--messaging');
+
+    const handleFocusEvent = (input, button) => {
+      input.addEventListener('focus', event => {
+        if (!event.target.value) {
+          button.disabled = false;
+        }
+      });
+
+      input.addEventListener('focusout', event => {
+        if (!event.target.value) {
+          button.disabled = true;
+        } else {
+          button.disabled = false;
+        }
+      });
+    };
+
+    messagingInputs.forEach(input => {
+      const currentMessagingInput = input.firstChild;
+      const currentButton = input.querySelector('button');
+
+      if (currentMessagingInput.value) currentButton.disabled = false;
+
+      handleFocusEvent(currentMessagingInput, currentButton);
+
+      currentMessagingInput.addEventListener('input', event => {
+        if (event.target.value) {
+          handleFocusEvent(currentMessagingInput, currentButton);
+        } else {
+          handleFocusEvent(currentMessagingInput, currentButton);
+        }
+      });
+    });
+  });
+};
+
+const HandleInputEvents = () => {
   initFloatingLabel();
+  initMessagingInputEvent();
   return null;
 };
 
-export default HandleFloatingLabel;
+export default HandleInputEvents;

doczrc.js

 import { css } from 'docz-plugin-css';
 
+const selectors = {
+  wrapper: '& .css-pw2o4y',
+  main: '& .css-1i0fr1k',
+  logo: '& .css-c9p757',
+  menuArea: '& .css-wwgiek',
+  innerMenuArea: '& .css-pccrlp',
+  menuItem: '& .css-82rrzo, .css-82rrzo.active, .css-82rrzo:visited',
+  menuSubitemsArea: '& .css-1qc5yjq',
+  menuSubItem: '& .css-1l1jc95, .css-1l1jc95:visited',
+  menuBtn: '& .css-6pue65, .css-15exo54',
+  menuBtnShape: '& .css-14xo6fr, .css-1v3qlja',
+  mobileLogoArea: '& .css-12xm67f',
+  mobileMenu: '& .css-k33w14',
+
+  /* Docz default elements (hidden) */
+
+  editPageBtn: '& .css-p4m8gg',
+  githubBtn: 'a[aria-label="View source on Github"]',
+  builtDocz: '& .css-b4nn6f',
+  search: '& .css-1pxi6pq',
+  menuBlueTop: '& .css-y1r3ra:before',
+  menuItemsBorder: '& .css-1ccg7te:after',
+  menuSubitemsBorder: '& .css-1evit71:after'
+};
+
 export default {
@@ -8,3 +33,3 @@ hashRouter: true,
     css({
-      preprocessor: 'postcss'
+      preprocessor: 'postcss' /* stylelint-disable-line */
     })
@@ -18,16 +43,202 @@ ],
   htmlContext: {
-    favicon: 'public/favicon.png',
+    favicon: 'public/favicon.png'
   },
   themeConfig: {
+    /* In this file, the font shorthand with variable only works if you'll use it whole don't need to alter any other font properties */
     styles: {
       body: {
+        /* Hide Docz default elements */
+
+        [selectors.editPageBtn]: {
+          display: 'none'
+        },
+        [selectors.githubBtn]: {
+          display: 'none'
+        },
+        [selectors.builtDocz]: {
+          display: 'none'
+        },
+        [selectors.search]: {
+          display: 'none'
+        },
+        [selectors.menuBlueTop]: {
+          display: 'none'
+        },
+        [selectors.menuItemsBorder]: {
+          display: 'none'
+        },
+        [selectors.menuSubitemsBorder]: {
+          display: 'none'
+        },
+
+        /* Custom theme styles */
+
+        [selectors.wrapper]: {
+          /* Gradient header */
+          backgroundImage: 'var(--gradient-nebulosa)',
+          backgroundPosition: 'top',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% 312px'
+        },
+        '@media (min-width: 768px)': {
+          [selectors.main]: {
+            padding: '0 40px 40px 100px'
+          }
+        },
+        [selectors.logo]: {
+          height: 171,
+          width: 151,
+          margin: '46px 60px',
+          backgroundImage: 'url("public/astro-logo.svg")',
+          backgroundSize: 164,
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+          textIndent: -999
+        },
+        '& p': {
+          font: 'var(--font-secondary)',
+          color: 'var(--color-moon-900)!important'
+        },
+        a: {
+          color: 'var(--color-uranus-700)'
+        },
+        [selectors.menuArea]: {
+          backgroundColor: 'var(--color-space-100)',
+          borderRight: '1px solid var(--color-space-300)',
+          width: 320,
+          [selectors.innerMenuArea]: {
+            width: 320
+          }
+        },
+        [selectors.menuItem]: {
+          fontFamily: "'Poppins', sans-serif",
+          fontSize: 20,
+          fontWeight: 500,
+          color: 'var(--color-moon-900)',
+          borderTop: '1px solid var(--color-space-300)',
+          padding: '22px 50px',
+          '&:hover': {
+            color: 'var(--color-moon-300)',
+            fontWeight: 500
+          },
+          '&:after': {
+            position: 'absolute',
+            right: 32,
+            width: 32,
+            height: 32,
+            content: '""',
+            maskImage: 'url("public/drop-down.svg")',
+            backgroundColor: 'var(--color-moon-900)'
+          },
+          '&.active:after': {
+            maskImage: 'url("public/drop-up.svg")',
+            backgroundColor: 'var(--color-moon-900)'
+          }
+        },
+        '@media (max-width: 1119px)': {
+          [selectors.menuItem]: {
+            padding: '22px 39px'
+          }
+        },
+        [selectors.menuSubitemsArea]: {
+          margin: '5px 0 15px'
+        },
+        [selectors.menuSubItem]: {
+          fontFamily: "'Poppins', sans-serif",
+          fontSize: 16,
+          fontWeight: 500,
+          color: 'var(--color-moon-400)',
+          padding: '6px 50px',
+          opacity: 1,
+          '&:hover': {
+            color: 'var(--color-moon-300)'
+          },
+          '&.active': {
+            color: 'var(--color-moon-900)'
+          },
+          '&:before': {
+            display: 'none'
+          }
+        },
+        [selectors.menuBtn]: {
+          backgroundColor: 'transparent',
+          '&:before': {
+            display: 'none'
+          }
+        },
+        [selectors.menuBtnShape]: {
+          height: 0,
+          border: '1px solid var(--color-space-100)',
+          borderRadius: 3,
+          backgroundColor: 'var(--color-space-100)'
+        },
+        [selectors.mobileLogoArea]: {
+          padding: 0,
+          '&:before': {
+            display: 'none'
+          }
+        },
+        [selectors.mobileMenu]: {
+          backgroundColor: 'var(--color-space-100)'
+        },
+        '@media (max-width: 560px)': {
+          '& h1.css-bdhje3': {
+            /* Specificity hack for responsive h1 */
+            fontSize: 48
+          }
+        }
+      },
+      h1: {
         fontFamily: "'Poppins', sans-serif",
+        fontSize: 64,
+        fontWeight: 600,
+        letterSpacing: 'normal',
+        color: 'var(--color-space-100)',
+        margin: '103px 0 186px',
+        ':before': {
+          /* Removes bottom blue line */
+          display: 'none'
+        }
+      },
+      h2: {
+        fontFamily: "'Poppins', sans-serif",
+        fontSize: 24,
+        fontWeight: 600,
+        color: 'var(--color-moon-500)',
+        borderBottom: 'none',
+        margin: '0 0 15px',
+        '& a[href]': {
+          /* Selects download links in Typography page */
+          color: 'var(--color-uranus-700)',
+          textDecoration: 'underline',
+          '&:hover': {
+            color: 'var(--color-uranus-500)'
+          },
+          '&:active': {
+            color: 'var(--color-uranus-800)'
+          }
+        },
+        '&#manifesto, &#get-started': {
+          /* Selects specific Homepage h2 headings */
+          fontSize: 40,
+          color: 'var(--color-moon-900)',
+          marginTop: 64
+        }
+      },
+      h3: {
+        fontFamily: "'Poppins', sans-serif",
         fontSize: 16,
-        lineHeight: 1.5
+        fontWeight: 600,
+        color: 'var(--color-moon-500)'
       },
-      h1: {
-        fontFamily: "'Poppins', sans-serif"
+      h4: {
+        fontFamily: "'Lato', sans-serif",
+        fontSize: 22,
+        fontWeight: 400,
+        color: 'var(--color-moon-400)',
+        marginBottom: 65
       },
       playground: {
         padding: 16,
+        overflowX: 'scroll',
         '& > *': {
@@ -39,2 +250,6 @@ boxSizing: 'border-box',
           marginBottom: 22
+        },
+        '&.two-columns': {
+          display: 'inline-grid',
+          gridTemplateColumns: 'auto auto'
         }
@@ -41,0 +256,0 @@ }

package.json

 {
   "name": "@magnetis/astro",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Magnetis (https://github.com/magnetis)",
@@ -5,0 +5,0 @@ "homepage": "https://astro.magnetis.com.br/",

No alert changes

Improved metrics

Total package byte prevSize

484411

increased by148.28%

Number of package files

160

increased by185.71%

Lines of code

1882

increased by47.84%

No dependency changes