Merge pull request #18 from InteractionDesignFoundation/html-basic-styling

Add option to include basic styling for HTML elements

Author: Jason Tame

README.md

@@ -1,5 +1,5 @@
-| We stand with Ukraine | 🇺🇦 |
-|:---------------------:|:-----|
+| We stand with Ukraine | 🇺🇦  |
+| :-------------------: | :-- |
 
 # Nova HTML Card
 
@@ -12,7 +12,6 @@ Adds a card to the Laravel Nova dashboard with any arbitrary HTML content.
 
 ![image](https://user-images.githubusercontent.com/5278175/60386958-35899080-9aa5-11e9-8e1f-b29e95c80d2c.png)
 
-
 ## Installation
 
 You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
@@ -38,37 +37,34 @@ public function cards()
 }
 ```
 
-
 ### Options
 
- - Set content
-     - `->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(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.
-
+- Set content
+  - `->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(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.
+  - `->withBasicStyles()`: Adds some basic styling to the HTML elements in the card. Useful when rendering Markdown.
 
 ## 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
 
+- 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.
 
-
 ## Contributing
 
 Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
 
-
 ## License
 
 The MIT License (MIT). Please see [License File](LICENSE) for more information.

dist/js/card.js

@@ -1,3 +1,3 @@
 {
-    "/js/card.js": "/js/card.js?id=591c45f787ce8b18b6c3724b2c083b88"
+    "/js/card.js": "/js/card.js?id=656041b0c15589bc5890ab8120de6604"
 }

dist/mix-manifest.json

@@ -15,6 +15,8 @@
     },
     "devDependencies": {
         "laravel-mix": "^6.0",
+        "node-sass": "^8.0.0",
+        "sass-loader": "^13.2.0",
         "vue-loader": "^16.8.3"
     },
     "dependencies": {

package.json

@@ -1,37 +1,37 @@
 <template>
-    <div v-if="card.withoutCardStyles" class="htmlCard" :class="cardClassList">
-        <div v-html="card.content" class="htmlCard__content">
-        </div>
-    </div>
+  <div v-if="card.withoutCardStyles" class="htmlCard" :class="cardClassList">
+    <CardContent
+      :content="card.content"
+      :with-basic-styles="card.withBasicStyles"
+    />
+  </div>
 
-    <Card v-else class="htmlCard" :class="cardClassList">
-        <div class="px-3 py-3">
-            <div v-html="card.content" class="htmlCard__content">
-            </div>
-        </div>
-    </Card>
+  <Card v-else class="htmlCard" :class="cardClassList">
+    <div class="px-3 py-3">
+      <CardContent
+        :content="card.content"
+        :with-basic-styles="card.withBasicStyles"
+      />
+    </div>
+  </Card>
 </template>
 
 <script>
-    export default {
-        props: [
-            'card',
-        ],
-        computed: {
-            cardClassList() {
-                let classes = '';
-                if (this.card.center) {
-                    classes += ' flex flex-col justify-center text-center';
-                }
+import CardContent from './CardContent';
+export default {
+  components: {
+    CardContent,
+  },
+  props: ['card'],
+  computed: {
+    cardClassList() {
+      let classes = '';
+      if (this.card.center) {
+        classes += ' flex flex-col justify-center text-center';
+      }
 
-                return classes;
-            },
-        },
-    }
+      return classes;
+    },
+  },
+};
 </script>
-
-<style>
-    .htmlCard__content > p:not(:last-child) {
-        margin-bottom: 1em;
-    }
-</style>

resources/js/components/Card.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    v-html="content"
+    class="htmlCard__content"
+    :class="{htmlCard__basicStyles: withBasicStyles}"
+  ></div>
+</template>
+
+<script>
+export default {
+  props: ['content', 'withBasicStyles'],
+};
+</script>
+
+<style lang="scss">
+.htmlCard__content {
+  p:not(:last-child) {
+    margin-bottom: 1em;
+  }
+}
+
+.htmlCard__basicStyles {
+  a {
+    color: #009cde;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin: 15px 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 30px;
+  }
+
+  li {
+    list-style: disc;
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.2em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 1em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    line-height: 1.7;
+    margin-bottom: 15px;
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p {
+    margin-top: 10px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code,
+  pre {
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    font-family: Consolas, 'Liberation Mono', Courier, monospace;
+    font-size: 12px;
+    margin: 0 2px;
+    padding: 6px;
+    white-space: pre;
+  }
+
+  pre code {
+    border: none;
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+  }
+}
+</style>

resources/js/components/CardContent.vue

@@ -24,6 +24,7 @@ public function __construct($component = null)
         $this->withMeta([
             'center' => false,
             'withoutCardStyles' => false,
+            'withBasicStyles' => false,
             'content' => '',
         ]);
     }
@@ -71,4 +72,10 @@ public function withoutCardStyles(bool $withoutStyles = true): static
     {
         return $this->withMeta(['withoutCardStyles' => $withoutStyles]);
     }
+
+    /** Whether to add basic styles for HTML content */
+    public function withBasicStyles(bool $withBasicStyles = true): static
+    {
+        return $this->withMeta(['withBasicStyles' => $withBasicStyles]);
+    }
 }