brahma-ui - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

lib/components/Button/Button.d.ts

@@ -5,3 +5,3 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 export declare type ButtonProps = {
-    size?: 'fullWidth' | 'long' | 'short';
+    size?: 'fullWidth' | 'long' | 'short' | 'mini';
     type?: 'primary' | 'secondary';
@@ -8,0 +8,0 @@ color?: TColors;

lib/components/Navbar/Navbar.d.ts

@@ -5,6 +5,8 @@ /// <reference types="react" />
     href: string;
+    onItemClick?: (href: string) => void;
 };
 export declare type NavbarProps = {
     items: ItemProps[];
+    actionButton?: React.ReactNode;
 };
-export default function Navbar({ items }: NavbarProps): JSX.Element;
+export default function Navbar({ items, actionButton }: NavbarProps): JSX.Element;

lib/index.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 declare type ButtonProps = {
-    size?: 'fullWidth' | 'long' | 'short';
+    size?: 'fullWidth' | 'long' | 'short' | 'mini';
     type?: 'primary' | 'secondary';
@@ -66,7 +66,9 @@ color?: TColors;
     href: string;
+    onItemClick?: (href: string) => void;
 };
 declare type NavbarProps = {
     items: ItemProps[];
+    actionButton?: React.ReactNode;
 };
-declare function Navbar({ items }: NavbarProps): JSX.Element;
+declare function Navbar({ items, actionButton }: NavbarProps): JSX.Element;
 
@@ -143,2 +145,9 @@ declare type ProgressBarProps = {
             readonly huge: "23rem";
+            readonly mobile: {
+                readonly xsmall: "1.6rem";
+                readonly small: "2rem";
+                readonly medium: "3.6rem";
+                readonly large: "5rem";
+                readonly xlarge: "8rem";
+            };
         };
@@ -184,3 +193,3 @@ };
 declare type CustomThemeProviderProps = {
-    theme: Theme;
+    theme?: Theme;
     children: React.ReactNode;
@@ -187,0 +196,0 @@ };

lib/styles/customProvider.d.ts

 /// <reference types="react" />
 import { Theme } from './theme';
 declare type CustomThemeProviderProps = {
-    theme: Theme;
+    theme?: Theme;
     children: React.ReactNode;
@@ -6,0 +6,0 @@ };

lib/styles/theme.d.ts

@@ -27,2 +27,9 @@ declare const theme: {
             readonly huge: "23rem";
+            readonly mobile: {
+                readonly xsmall: "1.6rem";
+                readonly small: "2rem";
+                readonly medium: "3.6rem";
+                readonly large: "5rem";
+                readonly xlarge: "8rem";
+            };
         };
@@ -29,0 +36,0 @@ };

package.json

 {
   "name": "brahma-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
@@ -5,0 +5,0 @@ "scripts": {

src/components/Button/styles.ts

@@ -19,4 +19,10 @@ import styled, { css, DefaultTheme } from 'styled-components'
 const wrapperModifiers = {
+  mini: () => css`
+    width: 23.2rem;
+    height: 4.6rem;
+  `,
+
   long: () => css`
     width: 44rem;
+    height: 6rem;
   `,
@@ -26,2 +32,3 @@
     width: 28.8rem;
+    height: 6rem;
     p {
@@ -34,2 +41,3 @@ font-weight: 600;
     width: 100%;
+    height: 6rem;
   `,
@@ -82,3 +90,3 @@
     ${!!size && wrapperModifiers[size!]()};
-    ${disabled && wrapperModifiers.disabled()!};
+    ${disabled && wrapperModifiers.disabled()};
   `}
@@ -88,6 +96,6 @@ `
 export const Button = styled.button<ButtonStyleProps>`
-  ${({ theme, color, type, disabled, iconPlacement }) => css`
+  ${({ theme, color, type, size, disabled, iconPlacement }) => css`
     position: relative;
     cursor: pointer;
-    height: 60px;
+    height: 100%;
     width: 100%;
@@ -94,0 +102,0 @@ background-color: ${theme.colors[color!]};

src/components/Navbar/styles.ts

@@ -37,2 +37,3 @@ import styled, { css } from 'styled-components'
   ${({ theme }) => css`
+    position: relative;
     display: flex;
@@ -42,2 +43,3 @@ justify-content: space-between;
     padding: 2rem 1.6rem;
+    z-index: ${theme.layers.overlay};
   `}
@@ -53,2 +55,6 @@ `
   ${({ theme, open = false }) => css`
+    position: absolute;
+    top: 75px;
+    left: 0;
+    width: 100%;
     display: flex;
@@ -58,3 +64,5 @@ align-items: center;
     flex: 1;
+    background: ${theme.colors.black};
     transition: ${theme.transition.default};
+    z-index: ${theme.layers.overlay};
 
@@ -100,3 +108,5 @@ ${open
 
-export const ButtonWrapper = styled.div``
+export const ButtonWrapper = styled.div`
+  width: 20%;
+`
 
@@ -103,0 +113,0 @@ export const MobileIconWrapper = styled.div`

src/components/Typography/styles.ts

 import styled, { css } from 'styled-components'
+import media from 'styled-media-query'
 import { Theme } from 'styles/theme'
@@ -19,2 +20,8 @@ import { TypographyProps } from './Typography'
     letter-spacing: '-4%';
+
+    ${media.lessThan('medium')`
+      font-size: ${theme.font.sizes.mobile.xlarge};
+      font-weight: ${theme.font.bold};
+      line-height: 100%;
+    `}
   `,
@@ -28,2 +35,8 @@
     letter-spacing: '-8%';
+
+    ${media.lessThan('medium')`
+    font-size: ${theme.font.sizes.mobile.large};
+      line-height: 100%;
+      font-weight: ${theme.font.bold};
+    `}
   `,
@@ -37,2 +50,8 @@
     letter-spacing: -0.02rem;
+
+    ${media.lessThan('medium')`
+    font-size: ${theme.font.sizes.mobile.small};
+      line-height: 120%;
+      font-weight: ${theme.font.medium};
+    `}
   `,
@@ -45,2 +64,7 @@
     line-height: 42px;
+
+    ${media.lessThan('medium')`
+    font-size: ${theme.font.sizes.mobile.xsmall};
+    line-height: 120%;
+    `}
   `,
@@ -53,2 +77,8 @@
     line-height: 28px;
+
+    ${media.lessThan('medium')`
+    font-size: ${theme.font.sizes.mobile.xsmall};
+    font-weight: ${theme.font.medium};
+      line-height: 100%;
+    `}
   `,
@@ -55,0 +85,0 @@

src/index.ts

@@ -1,34 +0,1 @@
-// import { Button } from 'components/Button'
-// import { Card } from 'components/Card'
-// import { Checkbox } from 'components/Checkbox'
-// import { Footer } from 'components/Footer'
-// import { Input } from 'components/Input'
-// import { MediaMatch } from 'components/MediaMatch'
-// import { Navbar } from 'components/Navbar'
-// import NewCo from 'components/NewCo'
-// import { ProgressBar } from 'components/ProgressBar'
-// import { Switch } from 'components/Switch'
-// import { Tabs } from 'components/Tabs'
-// import { TabSelector } from 'components/TabSelector'
-// import { Typography } from 'components/Typography'
-// import { CustomThemeProvider } from 'styles/customProvider'
-// import theme from 'styles/theme'
-
-// export {
-//   Button,
-//   Switch,
-//   Typography,
-//   Checkbox,
-//   Input,
-//   TabSelector,
-//   Tabs,
-//   Navbar,
-//   Card,
-//   Footer,
-//   ProgressBar,
-//   NewCo,
-//   CustomThemeProvider,
-//   MediaMatch,
-//   theme
-// }
 export * from './components'

src/styles/theme.ts

@@ -26,3 +26,10 @@ const theme = {
       xxlarge: '20rem',
-      huge: '23rem'
+      huge: '23rem',
+      mobile: {
+        xsmall: '1.6rem',
+        small: '2rem',
+        medium: '3.6rem',
+        large: '5rem',
+        xlarge: '8rem'
+      }
     }
@@ -29,0 +36,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

776208

increased by1.05%

Lines of code

4978

increased by2.39%

No dependency changes