@cloudbees/honeyui-card - npm Package Compare versions

Comparing version 0.8.0 to 1.0.0

dist/index.css.d.ts

@@ -5,2 +5,3 @@ // This file is automatically generated.
   'accordion': string;
+  'btn': string;
   'card': string;
@@ -7,0 +8,0 @@ 'card-body': string;

package.json

 {
   "name": "@cloudbees/honeyui-card",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "description": "",
@@ -30,3 +30,3 @@ "main": "dist/index.css",
   },
-  "gitHead": "3cebfb5dc78fa6ae57372e88076197591c633b14"
+  "gitHead": "8771621568cb8e931a29f7482454ba2de6ac4236"
 }

stories/card-basic.story.jsx

 import React from "react";
 
 export default (
-  <div className="m-5">
-    <div className="card" style={{ width: "18rem" }}>
-      <div className="card-body">This is some text within a card body.</div>
+  <div className="container-fluid">
+    <div className="row mb-2">
+      <div className="col col-sm-4">
+        <div className="card">
+          <div className="card-body">This is some text within a card body.</div>
+        </div>
+      </div>
     </div>
   </div>
 );

stories/card-image.story.jsx

 import React from "react";
 
 export default (
-  <div className="m-5">
-    <div className="card" style={{ width: "18rem" }}>
-      <img src="https://via.placeholder.com/150" className="card-img-top" alt="..." />
-      <div className="card-body">
-        <p className="card-text">
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </p>
+  <div className="container-fluid">
+    <div className="row mb-2">
+      <div className="col col-sm-4">
+        <div className="card">
+          <img src="https://via.placeholder.com/150" className="card-img-top" alt="..." />
+          <div className="card-body">
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content.
+            </p>
+          </div>
+        </div>
       </div>
+      <div className="col col-sm-4">
+        <div className="card">
+          <img src="https://via.placeholder.com/150" className="card-img-top" alt="..." />
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content.
+            </p>
+            <button type="button" className="btn btn-primary">
+              Primary
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 );

stories/card-list.story.jsx

@@ -5,11 +5,15 @@ import React from "react";
 export default (
-  <div className="m-5">
-    <div className="card" style={{ width: "18rem" }}>
-      <ul className="list-group list-group-flush">
-        <li className="list-group-item">Cras justo odio</li>
-        <li className="list-group-item">Dapibus ac facilisis in</li>
-        <li className="list-group-item">Vestibulum at eros</li>
-      </ul>
+  <div className="container-fluid">
+    <div className="row mb-2">
+      <div className="col col-sm-4">
+        <div className="card">
+          <ul className="list-group list-group-flush">
+            <li className="list-group-item">Cras justo odio</li>
+            <li className="list-group-item">Dapibus ac facilisis in</li>
+            <li className="list-group-item">Vestibulum at eros</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 );

stories/card-mix-and-match.story.jsx

 import React from "react";
 
 export default (
-  <div className="m-5">
-    <div className="card" style={{ width: "18rem" }}>
-      <img src="https://via.placeholder.com/150" className="card-img-top" alt="..." />
-      <div className="card-body">
-        <h5 className="card-title">Card title</h5>
-        <p className="card-text">
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content.
-        </p>
+  <div className="container-fluid">
+    <div className="row mb-2">
+      <div className="col col-sm-4">
+        <div className="card">
+          <img src="https://via.placeholder.com/150" className="card-img-top" alt="..." />
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content.
+            </p>
+          </div>
+          <ul className="list-group list-group-flush">
+            <li className="list-group-item">Cras justo odio</li>
+            <li className="list-group-item">Dapibus ac facilisis in</li>
+            <li className="list-group-item">Vestibulum at eros</li>
+          </ul>
+          <div className="card-body">
+            <a href="#" className="card-link">
+              Card link
+            </a>
+            <a href="#" className="card-link">
+              Another link
+            </a>
+          </div>
+        </div>
       </div>
-      <ul className="list-group list-group-flush">
-        <li className="list-group-item">Cras justo odio</li>
-        <li className="list-group-item">Dapibus ac facilisis in</li>
-        <li className="list-group-item">Vestibulum at eros</li>
-      </ul>
-      <div className="card-body">
-        <a href="#" className="card-link">
-          Card link
-        </a>
-        <a href="#" className="card-link">
-          Another link
-        </a>
-      </div>
     </div>
   </div>
 );

stories/card-text-link.story.jsx

 import React from "react";
 
 export default (
-  <div className="m-5">
-    <div className="card" style={{ width: "18rem" }}>
-      <div className="card-body">
-        <h5 className="card-title">Card title</h5>
-        <h6 className="card-subtitle mb-2 text-muted">Card subtitle</h6>
-        <p className="card-text">
-          Some quick example text to build on the card title and make up the bulk of the card's
-          content test test test.
-        </p>
-        <a href="#" className="card-link">
-          Card link
-        </a>
-        <a href="#" className="card-link">
-          Another link
-        </a>
+  <div className="container-fluid">
+    <div className="row mb-4">
+      <div className="col col-sm-4">
+        <div className="card">
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content test test test.
+            </p>
+          </div>
+        </div>
       </div>
+      <div className="col col-sm-4">
+        <div className="card">
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <h6 className="card-subtitle text-muted">Card subtitle</h6>
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content test test test.
+            </p>
+            <a href="#" className="card-link">
+              Card link
+            </a>
+            <a href="#" className="card-link">
+              Another link
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="col col-sm-4">
+        <div className="card">
+          <div className="card-body">
+            <h5 className="card-title">Card title</h5>
+            <p className="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card's
+              content test test test.
+            </p>
+            <button type="button" className="btn btn-primary">
+              Primary
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 );

stories/index.stories.jsx

 import { storiesOf } from "@storybook/react";
 import cardBasicStory from "./card-basic.story";
 import cardTextLinkStory from "./card-text-link.story";
+import cardHeaderFooterStory from "./card-header-footer.story";
 import cardImageStory from "./card-image.story";
 import cardListStory from "./card-list.story";
 import cardMixAndMatchStory from "./card-mix-and-match.story";
+import cardColorAndOutlineStory from "./card-color-outline.story";
 
 storiesOf("Components | Card", module)
   .add("Card Basic", () => cardBasicStory)
-  .add("Card with Text and Links", () => cardTextLinkStory)
+  .add("Card with Title and Links", () => cardTextLinkStory)
+  .add("Card with Header and Footer", () => cardHeaderFooterStory)
   .add("Card with Image", () => cardImageStory)
   .add("Card with a List", () => cardListStory)
-  .add("Card mix and match", () => cardMixAndMatchStory);
+  .add("Card mix and match", () => cardMixAndMatchStory)
+  .add("Card color and outline", () => cardColorAndOutlineStory);

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83643

increased by8.98%

Number of package files

16

increased by14.29%

Lines of code

260

increased by80.56%

Number of low quality alerts

1

decreased by-50%

No dependency changes