#6 Add an option to ignore standard Nova card styling

Author: alies-dev

README.md

@@ -32,14 +32,22 @@ public function cards()
 
 ### Options
  - Set content
-     - `->html('string')`: Set HTML or plain content.
-     - `->markdown('string')`: Set Markdown content that will be converted into HTML.
+     - `->html('<h1>Hello!</h1>')`: Set HTML or plain content.
+     - `->markdown('# Hello!')`: Set Markdown content that will be converted into HTML.
      - `->view('path.to.view', [])`: Specify blade view file and optionally pass an array of data to view.
  - Styling
-    - `->center(boolean)`: Center card's content.
+    - `->center(false)`: Center card's content. `false` by default. 
+    - `->withoutCardStyles(true)`: Whether to use standard Nova Card styles for a card (background, padding, etc). `false` by default. 
 
 
-### Changelog
+## Why this package?
+There are a few packages with similar functionality.
+Our package provides an API to cover all cases covered by these packages plus additionally provides some unique features like:
+ - markdown support
+ - easy switch between class Nova-card look and raw-HTML look
+ - Simple, Laravel-like API
+
+## Changelog
 
 Please see [Releases](https://github.com/InteractionDesignFoundation/nova-html-card/releases) for more information on what has changed recently.
 

dist/js/card.js

@@ -1,3 +1,3 @@
 {
-    "/js/card.js": "/js/card.js?id=3f77fbcf19a5dc9cd000"
+    "/js/card.js": "/js/card.js?id=a9bc40bde6cb473bb382"
 }

dist/mix-manifest.json

@@ -1,34 +1,33 @@
 <template>
-    <card class="flex flex-col justify-center htmlCard" :class="cardClassList">
+    <div v-if="card.withoutCardStyles" class="htmlCard" :class="cardClassList">
+        <div v-html="card.content" class="htmlCard__content">
+        </div>
+    </div>
+
+    <card v-else class="htmlCard htmlCard--hasDefaultHeight" :class="cardClassList">
         <div class="px-3 py-3">
-            <section v-html="card.content" class="htmlCard__content">
-            </section>
+            <div v-html="card.content" class="htmlCard__content">
+            </div>
         </div>
     </card>
 </template>
 
 <script>
-  export default {
-    props: [
-      'card',
-    ],
-    computed: {
-      textClassList() {
-        return this.card.center ? 'text-center' : '';
-      },
-      cardClassList() {
-        const classes = [];
-        if (this.card.center) {
-          classes.push('items-center');
-        }
+    export default {
+        props: [
+            'card',
+        ],
+        computed: {
+            cardClassList() {
+                let classes = '';
+                if (this.card.center) {
+                    classes += ' flex flex-col justify-center text-center';
+                }
 
-        return classes.join(' ');
-      },
-    },
-    mounted() {
-      //
-    },
-  }
+                return classes;
+            },
+        }
+    }
 </script>
 
 <style>
@@ -38,8 +37,10 @@
 </style>
 
 <style scoped>
-    .card-panel {
-        min-height: 150px;
+    .htmlCard {
         height: auto;
     }
+    .htmlCard--hasDefaultHeight {
+        min-height: 150px;
+    }
 </style>

resources/js/components/Card.vue

@@ -26,6 +26,7 @@ public function __construct($component = null)
 
         $this->withMeta([
             'center' => false,
+            'withoutCardStyles' => false,
             'content' => '',
         ]);
     }
@@ -80,12 +81,24 @@ public function view(string $view, array $viewData = [])
     /**
      * Center card's content
      *
-     * @param bool $boolean
+     * @param bool $centerContent
      *
      * @return HtmlCard
      */
-    public function center($boolean = true)
+    public function center(bool $centerContent = true)
     {
-        return $this->withMeta(['center' => $boolean]);
+        return $this->withMeta(['center' => $centerContent]);
+    }
+
+    /**
+     * Whether to use standard Nova Card styles for a card (background, padding, etc)
+     *
+     * @param bool $withoutStyles
+     *
+     * @return HtmlCard
+     */
+    public function withoutCardStyles(bool $withoutStyles = true)
+    {
+        return $this->withMeta(['withoutCardStyles' => $withoutStyles]);
     }
 }