Updated documentation for currency component, clarified usage guidance and presentation

Author: devajmeireles

resources/views/documentation/v2/form/currency.blade.php

@@ -15,7 +15,7 @@
     <x-section title="Concept" disable-copy>
         The currency component is a component designed for displaying and formatting
         currency values. Behind the scenes the currency component is an adaptation of
-        the Input component with usage of native JavaScript's <x-block>Intl.NumberFormat</x-block>
+        the <x-block>input</x-block> component with usage of native JavaScript's <x-block>Intl.NumberFormat</x-block>
     </x-section>
     <x-section title="Basic Usage">
         <x-preview language="blade" :contents="$basic">
@@ -35,7 +35,7 @@
     <x-section title="Different Currencies">
         <div class="space-y-4">
             <p>
-                The currency component has a <x-block>locale</x-block> attribute that matches the logic of
+                You should use the <x-block>locale</x-block> attribute to matches the logic of
                 <x-block>Intl.NumberFormat</x-block>. By default, the value assigned to the locale attribute
                 is <x-block>en-US</x-block>, but you can use any other value supported by <x-block>Intl.NumberFormat</x-block>
                 to format the input in the desired currency format.
@@ -52,7 +52,7 @@
     <x-section title="Intl Options" disable-copy>
         <div class="space-y-4">
             <p>
-                The currency component was built with two attributes that are intended to manipulate the JavaScript <x-block>Intl.NumberFormat</x-block>,
+                The component was built with two attributes that are intended to manipulate the JavaScript <x-block>Intl.NumberFormat</x-block>,
                 called <x-block>decimals</x-block> and <x-block>precision</x-block>. You can use them to manipulate the
                 JavaScript <x-block>Intl.NumberFormat</x-block>:
             </p>
@@ -62,7 +62,7 @@
     <x-section title="Symbols">
         <div class="space-y-4">
             <p>
-                The currency component supports displaying symbols related to each supported
+                You can display symbols related to each supported
                 currency through <a href="{{ route('documentation', ['v2', 'translation']) }}" class="underline">TallStackUI's translation system.</a> You can control which symbol
                 will be displayed via arguments.
             </p>
@@ -89,15 +89,22 @@
     <x-section title="Caveats">
         <div class="space-y-4">
             <p>
-                There are a few important things to note about the currency component. The first is that the component
-                can be used entirely out of the Livewire context. For this type of situation, the value to be formatted
-                should be sent to the currency component using the <x-block>value</x-block> attribute, but with the value as a string.
-                The value will be returned to the controller formatted as a string, when the form is submitted.
-                When the component is used inside the Livewire context, however, the value can be sent in different
-                formats <i>(float, int, string)</i>, but the value returned by default will not be formatted. To format the
-                value when emitting it to the Livewire, you must use the <x-block>mutate</x-block> attribute, which
-                instructs the currency component to format the value before binding it to the Livewire property.
+                There are a few important caveats to note about the currency component:
             </p>
+            <ul class="list-inside list-decimal space-y-2">
+                <li>
+                    The component
+                    can be used entirely out of the Livewire context. For this type of situation, the value to be formatted
+                    should be sent to the currency component using the <x-block>value</x-block> attribute, but with the value as a string.
+                    The value will be returned to the controller formatted as a string, when the form is submitted.
+                </li>
+                <li>
+                    When using the component inside the Livewire context, however, the value can be sent to the component in different
+                    formats <i>(float, int, string)</i>, but the value returned by default will not be formatted. To format the
+                    value when emitting it to the Livewire, you must use the <x-block>mutate</x-block> attribute, which
+                    instructs the currency component to format the value before binding it to the Livewire property.
+                </li>
+            </ul>
             <x-preview language="blade" :contents="$mutate">
                 <div class="space-y-2">
                     <livewire:documentation.form.currency />

resources/views/livewire/documentation/form/currency.blade.php

@@ -7,6 +7,6 @@
 <div>
     <div class="space-y-2">
         <x-currency label="Mutating" wire:model.live="value" mutate />
-        <x-badge>Value: {{ $value }}</x-badge>
+        <x-badge>Value Binded: {{ $value }}</x-badge>
     </div>
 </div>