mdlz-prmtz - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.d.ts

@@ -6,2 +6,4 @@ export { AspectRatio, AspectRatioProps } from './components/AspectRatio';
 export { Button, ButtonProps } from './components/Button';
+export { Card, CardProps } from './components/Card';
+export { CardLink, CardLinkProps } from './components/CardLink';
 export { Code, CodeProps } from './components/Code';
@@ -8,0 +10,0 @@ export { Container, ContainerProps } from './components/Container';

dist/index.es.js

@@ -88,2 +88,22 @@ import React, { forwardRef } from 'react';
 
+var styleProps$2 = compose(textColor, backgroundColor, border, boxShadow, margin, padding, width, maxWidth);
+var cardStyle = {
+    boxSizing: 'border-box',
+    border: '1px solid lightgray',
+    borderRadius: 5,
+    padding: 10,
+};
+var Card = styled('div')(cardStyle, function (props) { return props.css; }, styleProps$2);
+
+var CardLink = styled('a')(cardStyle, {
+    display: 'block',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    outline: 0,
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    ':hover': {
+        borderColor: 'gray',
+    },
+}, function (props) { return props.css; }, styleProps$2);
+
 var Code = styled('code')({
@@ -95,3 +115,3 @@ display: 'inline-block',
 
-var styleProps$2 = compose(alignSelf, flex, justifySelf, maxWidth, margin, padding);
+var styleProps$3 = compose(alignSelf, flex, justifySelf, maxWidth, margin, padding);
 var Container = styled('div')({
@@ -101,3 +121,3 @@ marginLeft: 'auto',
     flex: 1,
-}, styleProps$2, function (props) { return props.css; });
+}, styleProps$3, function (props) { return props.css; });
 
@@ -131,3 +151,3 @@ function Portal(_a) {
 
-var styleProps$3 = compose(backgroundColor, opacity);
+var styleProps$4 = compose(backgroundColor, opacity);
 var Overlay = styled('div')({
@@ -140,3 +160,3 @@ position: 'fixed',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
-}, function (props) { return props.css; }, styleProps$3);
+}, function (props) { return props.css; }, styleProps$4);
 
@@ -178,3 +198,3 @@ function Dialog(_a) {
 
-var styleProps$4 = compose(backgroundColor, maxWidth, margin, height);
+var styleProps$5 = compose(backgroundColor, maxWidth, margin, height);
 var Divider = styled('div')({
@@ -184,10 +204,10 @@ backgroundColor: 'gray',
     width: '100%',
-}, function (props) { return props.css; }, styleProps$4);
+}, function (props) { return props.css; }, styleProps$5);
 
 var Flex = styled(Box)({ display: 'flex' }, flexContainerSet, function (props) { return props.css; });
 
-var styleProps$5 = compose(textColor, margin, textAlign, fontStyle, fontWeight, lineHeight);
-var Heading = styled('h1')({ margin: 0 }, function (props) { return props.css; }, styleProps$5);
+var styleProps$6 = compose(textColor, margin, textAlign, fontStyle, fontWeight, lineHeight);
+var Heading = styled('h1')({ margin: 0 }, function (props) { return props.css; }, styleProps$6);
 
-var styleProps$6 = compose(textColor, fontSize);
+var styleProps$7 = compose(textColor, fontSize);
 var Link = styled('a')({
@@ -200,9 +220,9 @@ textDecoration: 'none',
     },
-}, function (props) { return props.css; }, styleProps$6);
+}, function (props) { return props.css; }, styleProps$7);
 
-var styleProps$7 = compose(backgroundColor, margin, width, height);
+var styleProps$8 = compose(backgroundColor, margin, width, height);
 var Pipe = styled('div')({
     backgroundColor: 'gray',
     width: '1px',
-}, function (props) { return props.css; }, styleProps$7);
+}, function (props) { return props.css; }, styleProps$8);
 
@@ -581,4 +601,4 @@ /**
 
-var styleProps$8 = compose(alignContent, alignItems, gridSet, margin, padding);
-var Grid = styled('div')({ display: 'grid' }, styleProps$8, function (props) { return props.css; });
+var styleProps$9 = compose(alignContent, alignItems, gridSet, margin, padding);
+var Grid = styled('div')({ display: 'grid' }, styleProps$9, function (props) { return props.css; });
 
@@ -687,7 +707,7 @@ var getCss = function (prop) { return function (props) {
 
-var styleProps$9 = compose(textColor, margin, padding, fontStyle, fontFamily, fontWeight, textAlign, lineHeight);
+var styleProps$a = compose(textColor, margin, padding, fontStyle, fontFamily, fontWeight, textAlign, lineHeight);
 var Text = styled('span')({
     fontSize: 'inherit',
     margin: 0,
-}, function (props) { return props.css; }, styleProps$9);
+}, function (props) { return props.css; }, styleProps$a);
 
@@ -755,2 +775,2 @@ var _a;
 
-export { Arrow, AspectRatio, Badge, Box, Button, Code, Container, Dialog, Divider, Flex, Grid, Heading, Link, Pipe, Popover, Slider, InnerTrack as SliderInnerTrack, Input as SliderInput, Track as SliderTrack, Text, ToggleButton, ToggleButtonGroup, Radio as ToggleButtonRadio, Wrapper$2 as ToggleButtonWrapper };
+export { Arrow, AspectRatio, Badge, Box, Button, Card, CardLink, Code, Container, Dialog, Divider, Flex, Grid, Heading, Link, Pipe, Popover, Slider, InnerTrack as SliderInnerTrack, Input as SliderInput, Track as SliderTrack, Text, ToggleButton, ToggleButtonGroup, Radio as ToggleButtonRadio, Wrapper$2 as ToggleButtonWrapper };

dist/index.js

@@ -95,2 +95,22 @@ 'use strict';
 
+var styleProps$2 = radixSystem.compose(radixSystem.textColor, radixSystem.backgroundColor, radixSystem.border, radixSystem.boxShadow, radixSystem.margin, radixSystem.padding, radixSystem.width, radixSystem.maxWidth);
+var cardStyle = {
+    boxSizing: 'border-box',
+    border: '1px solid lightgray',
+    borderRadius: 5,
+    padding: 10,
+};
+var Card = styled('div')(cardStyle, function (props) { return props.css; }, styleProps$2);
+
+var CardLink = styled('a')(cardStyle, {
+    display: 'block',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    outline: 0,
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    ':hover': {
+        borderColor: 'gray',
+    },
+}, function (props) { return props.css; }, styleProps$2);
+
 var Code = styled('code')({
@@ -102,3 +122,3 @@ display: 'inline-block',
 
-var styleProps$2 = radixSystem.compose(radixSystem.alignSelf, radixSystem.flex, radixSystem.justifySelf, radixSystem.maxWidth, radixSystem.margin, radixSystem.padding);
+var styleProps$3 = radixSystem.compose(radixSystem.alignSelf, radixSystem.flex, radixSystem.justifySelf, radixSystem.maxWidth, radixSystem.margin, radixSystem.padding);
 var Container = styled('div')({
@@ -108,3 +128,3 @@ marginLeft: 'auto',
     flex: 1,
-}, styleProps$2, function (props) { return props.css; });
+}, styleProps$3, function (props) { return props.css; });
 
@@ -138,3 +158,3 @@ function Portal(_a) {
 
-var styleProps$3 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.opacity);
+var styleProps$4 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.opacity);
 var Overlay = styled('div')({
@@ -147,3 +167,3 @@ position: 'fixed',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
-}, function (props) { return props.css; }, styleProps$3);
+}, function (props) { return props.css; }, styleProps$4);
 
@@ -185,3 +205,3 @@ function Dialog(_a) {
 
-var styleProps$4 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.maxWidth, radixSystem.margin, radixSystem.height);
+var styleProps$5 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.maxWidth, radixSystem.margin, radixSystem.height);
 var Divider = styled('div')({
@@ -191,10 +211,10 @@ backgroundColor: 'gray',
     width: '100%',
-}, function (props) { return props.css; }, styleProps$4);
+}, function (props) { return props.css; }, styleProps$5);
 
 var Flex = styled(Box)({ display: 'flex' }, radixSystem.flexContainerSet, function (props) { return props.css; });
 
-var styleProps$5 = radixSystem.compose(radixSystem.textColor, radixSystem.margin, radixSystem.textAlign, radixSystem.fontStyle, radixSystem.fontWeight, radixSystem.lineHeight);
-var Heading = styled('h1')({ margin: 0 }, function (props) { return props.css; }, styleProps$5);
+var styleProps$6 = radixSystem.compose(radixSystem.textColor, radixSystem.margin, radixSystem.textAlign, radixSystem.fontStyle, radixSystem.fontWeight, radixSystem.lineHeight);
+var Heading = styled('h1')({ margin: 0 }, function (props) { return props.css; }, styleProps$6);
 
-var styleProps$6 = radixSystem.compose(radixSystem.textColor, radixSystem.fontSize);
+var styleProps$7 = radixSystem.compose(radixSystem.textColor, radixSystem.fontSize);
 var Link = styled('a')({
@@ -207,9 +227,9 @@ textDecoration: 'none',
     },
-}, function (props) { return props.css; }, styleProps$6);
+}, function (props) { return props.css; }, styleProps$7);
 
-var styleProps$7 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.margin, radixSystem.width, radixSystem.height);
+var styleProps$8 = radixSystem.compose(radixSystem.backgroundColor, radixSystem.margin, radixSystem.width, radixSystem.height);
 var Pipe = styled('div')({
     backgroundColor: 'gray',
     width: '1px',
-}, function (props) { return props.css; }, styleProps$7);
+}, function (props) { return props.css; }, styleProps$8);
 
@@ -588,4 +608,4 @@ /**
 
-var styleProps$8 = radixSystem.compose(radixSystem.alignContent, radixSystem.alignItems, radixSystem.gridSet, radixSystem.margin, radixSystem.padding);
-var Grid = styled('div')({ display: 'grid' }, styleProps$8, function (props) { return props.css; });
+var styleProps$9 = radixSystem.compose(radixSystem.alignContent, radixSystem.alignItems, radixSystem.gridSet, radixSystem.margin, radixSystem.padding);
+var Grid = styled('div')({ display: 'grid' }, styleProps$9, function (props) { return props.css; });
 
@@ -694,7 +714,7 @@ var getCss = function (prop) { return function (props) {
 
-var styleProps$9 = radixSystem.compose(radixSystem.textColor, radixSystem.margin, radixSystem.padding, radixSystem.fontStyle, radixSystem.fontFamily, radixSystem.fontWeight, radixSystem.textAlign, radixSystem.lineHeight);
+var styleProps$a = radixSystem.compose(radixSystem.textColor, radixSystem.margin, radixSystem.padding, radixSystem.fontStyle, radixSystem.fontFamily, radixSystem.fontWeight, radixSystem.textAlign, radixSystem.lineHeight);
 var Text = styled('span')({
     fontSize: 'inherit',
     margin: 0,
-}, function (props) { return props.css; }, styleProps$9);
+}, function (props) { return props.css; }, styleProps$a);
 
@@ -767,2 +787,4 @@ var _a;
 exports.Button = Button;
+exports.Card = Card;
+exports.CardLink = CardLink;
 exports.Code = Code;
@@ -769,0 +791,0 @@ exports.Container = Container;

package.json

 {
   "name": "mdlz-prmtz",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Accessible and customisable primitives for the web",
@@ -21,4 +21,3 @@ "author": "Pedro Duarte <[e-mail]>",
     "prettier": "prettier './**/*.{js,jsx,ts,tsx,json,yml,yaml,css,md}' --write",
-    "release": "yarn build && npm publish",
-    "release-np": "yarn build && np",
+    "release": "yarn build && np",
     "yalc-release": "yarn build && yalc publish --push"
@@ -25,0 +24,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

104514

increased by2.53%

Number of package files

42

increased by5%

Lines of code

1963

increased by2.99%

No dependency changes