Dynamically set Tailwind blockquote colors in Blade

Author: emmadesilva

packages/framework/resources/views/components/colored-blockquote.blade.php

@@ -1,3 +1,8 @@
-<blockquote class="{{ $class }}">
+<blockquote @class([
+        'border-blue-500' => $class === 'info',
+        'border-green-500' => $class === 'success',
+        'border-amber-500' => $class === 'warning',
+        'border-red-600' => $class === 'danger',
+    ])>
     {!! $contents !!}
 </blockquote>

packages/framework/tests/Feature/IncludesFacadeTest.php

@@ -163,7 +163,7 @@ public function testAdvancedMarkdownDocumentIsCompiledToHtml()
         $expected = <<<'HTML'
         <h1>Heading</h1>
         <p>This is a paragraph. It has some <strong>bold</strong> and <em>italic</em> text.</p>
-        <blockquote class="info">
+        <blockquote class="border-blue-500">
             <p>Info Blockquote</p>
         </blockquote>
         <pre><code class="language-php"><small class="relative float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block top-0 right-0"><span class="sr-only">Filepath: </span>hello.php</small>echo 'Hello, World!';

packages/framework/tests/Feature/Services/Markdown/ShortcodeProcessorTest.php

@@ -38,7 +38,7 @@ public function testDiscoveredShortcodesAreUsedToProcessInput()
         $processor = new ShortcodeProcessor('>info foo');
 
         $this->assertSame(<<<'HTML'
-        <blockquote class="info">
+        <blockquote class="border-blue-500">
             <p>foo</p>
         </blockquote>
         HTML, $processor->run());
@@ -55,7 +55,7 @@ public function testProcessStaticShorthand()
     {
         $this->assertSame(
             <<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo</p>
             </blockquote>
             HTML, ShortcodeProcessor::preprocess('>info foo')

packages/framework/tests/Unit/ColoredBlockquoteShortcodesTest.php

@@ -40,7 +40,7 @@ public function testSignatures()
     public function testResolveMethod()
     {
         $this->assertSame(<<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo</p>
             </blockquote>
             HTML, ColoredBlockquotes::resolve('>info foo')
@@ -51,7 +51,7 @@ public function testCanUseMarkdownWithinBlockquote()
     {
         $this->assertSame(
             <<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo <strong>bar</strong></p>
             </blockquote>
             HTML, ColoredBlockquotes::resolve('>info foo **bar**')
@@ -80,31 +80,31 @@ public static function blockquoteProvider(): array
             [
                 '>danger This is a danger blockquote',
                 <<<'HTML'
-                <blockquote class="danger">
+                <blockquote class="border-red-600">
                     <p>This is a danger blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>info This is an info blockquote',
                 <<<'HTML'
-                <blockquote class="info">
+                <blockquote class="border-blue-500">
                     <p>This is an info blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>success This is a success blockquote',
                 <<<'HTML'
-                <blockquote class="success">
+                <blockquote class="border-green-500">
                     <p>This is a success blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>warning This is a warning blockquote',
                 <<<'HTML'
-                <blockquote class="warning">
+                <blockquote class="border-amber-500">
                     <p>This is a warning blockquote</p>
                 </blockquote>
                 HTML,

packages/framework/tests/Unit/MarkdownHelpersTest.php

@@ -129,7 +129,7 @@ public function testRenderWithCustomHydeMarkdownFeatures()
 
         $this->assertSame(<<<'HTML'
         <h1>Hello World</h1>
-        <blockquote class="info">
+        <blockquote class="border-blue-500">
             <p>Colored blockquote</p>
         </blockquote>
         <p><a href="index.html">Home</a></p>

packages/hydefront/components/blockquotes.css

@@ -12,7 +12,6 @@
 */
 
 @import 'hydefront/components/torchlight.css';
-@import 'hydefront/components/blockquotes.css';
 
 @tailwind base;
 @tailwind components;