fix(/docs): remove {' '} literals from code examples (#614)

Co-authored-by: Ricardo Lüders <ricardo@luders.com.br>
themesberg · Feb 22, 2023 · 2f46d90 · 2f46d90
1 parent 77cbc27
commit 2f46d90
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 62 deletions.
diff --git a/docs/content/components/button-group.md b/docs/content/components/button-group.md
@@ -80,15 +80,15 @@ You can also use SVG icons inside the grouped buttons.
 <Button.Group>
   <Button color="gray">
     <HiUserCircle className="mr-3 h-4 w-4" />
-    {' '}Profile
+    Profile
   </Button>
   <Button color="gray">
     <HiAdjustments className="mr-3 h-4 w-4" />
-    {' '}Settings
+    Settings
   </Button>
   <Button color="gray">
     <HiCloudDownload className="mr-3 h-4 w-4" />
-    {' '}Messages
+    Messages
   </Button>
 </Button.Group>
 {{< /example >}}
@@ -144,43 +144,43 @@ Group a series of buttons together on a single line or stack them in a vertical
   <Button.Group outline={true}>
     <Button color="gray">
       <HiUserCircle className="mr-3 h-4 w-4" />
-      {' '}Profile
+      Profile
     </Button>
     <Button color="gray">
       <HiAdjustments className="mr-3 h-4 w-4" />
-      {' '}Settings
+      Settings
     </Button>
     <Button color="gray">
       <HiCloudDownload className="mr-3 h-4 w-4" />
-      {' '}Messages
+      Messages
     </Button>
   </Button.Group>
   <Button.Group outline={true}>
     <Button gradientMonochrome="info">
       <HiUserCircle className="mr-3 h-4 w-4" />
-      {' '}Profile
+      Profile
     </Button>
     <Button gradientMonochrome="info">
       <HiAdjustments className="mr-3 h-4 w-4" />
-      {' '}Settings
+      Settings
     </Button>
     <Button gradientMonochrome="info">
       <HiCloudDownload className="mr-3 h-4 w-4" />
-      {' '}Messages
+      Messages
     </Button>
   </Button.Group>
   <Button.Group outline={true}>
     <Button gradientDuoTone="cyanToBlue">
       <HiUserCircle className="mr-3 h-4 w-4" />
-      {' '}Profile
+      Profile
     </Button>
     <Button gradientDuoTone="cyanToBlue">
       <HiAdjustments className="mr-3 h-4 w-4" />
-      {' '}Settings
+      Settings
     </Button>
     <Button gradientDuoTone="cyanToBlue">
       <HiCloudDownload className="mr-3 h-4 w-4" />
-      {' '}Messages
+      Messages
     </Button>
   </Button.Group>
 </div>

diff --git a/src/docs/pages/AccordionPage.tsx b/src/docs/pages/AccordionPage.tsx
@@ -18,13 +18,13 @@ const AccordionPage: FC = () => {
                 buttons, dropdowns, modals, navbars, and more.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out this guide to learn how to{' '}
+                Check out this guide to learn how to&nbsp;
                 <a
                   href="https://flowbite.com/docs/getting-started/introduction/"
                   className="text-blue-600 hover:underline dark:text-blue-500"
                 >
                   get started
-                </a>{' '}
+                </a>
                 and start developing websites even faster with components on top of Tailwind CSS.
               </p>
             </Accordion.Content>
@@ -37,10 +37,10 @@ const AccordionPage: FC = () => {
                 library has a design equivalent in our Figma file.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out the{' '}
+                Check out the&nbsp;
                 <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
                   Figma design system
-                </a>{' '}
+                </a>
                 based on the utility classes from Tailwind CSS and components from Flowbite.
               </p>
             </Accordion.Content>
@@ -92,13 +92,13 @@ const AccordionPage: FC = () => {
                 buttons, dropdowns, modals, navbars, and more.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out this guide to learn how to{' '}
+                Check out this guide to learn how to&nbsp;
                 <a
                   href="https://flowbite.com/docs/getting-started/introduction/"
                   className="text-blue-600 hover:underline dark:text-blue-500"
                 >
                   get started
-                </a>{' '}
+                </a>
                 and start developing websites even faster with components on top of Tailwind CSS.
               </p>
             </Accordion.Content>
@@ -111,10 +111,10 @@ const AccordionPage: FC = () => {
                 library has a design equivalent in our Figma file.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out the{' '}
+                Check out the
                 <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
                   Figma design system
-                </a>{' '}
+                </a>
                 based on the utility classes from Tailwind CSS and components from Flowbite.
               </p>
             </Accordion.Content>
@@ -166,14 +166,14 @@ const AccordionPage: FC = () => {
                 buttons, dropdowns, modals, navbars, and more.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out this guide to learn how to{' '}
+                Check out this guide to learn how to
                 <a
                   href="https://flowbite.com/docs/getting-started/introduction/"
                   className="text-blue-600 hover:underline dark:text-blue-500"
                 >
                   get started
-                </a>{' '}
-                and start developing websites even faster with components on top of Tailwind CSS.
+                </a>
+                &nbsp;and start developing websites even faster with components on top of Tailwind CSS.
               </p>
             </Accordion.Content>
           </Accordion.Panel>
@@ -185,11 +185,11 @@ const AccordionPage: FC = () => {
                 library has a design equivalent in our Figma file.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out the{' '}
+                Check out the&nbsp;
                 <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
                   Figma design system
-                </a>{' '}
-                based on the utility classes from Tailwind CSS and components from Flowbite.
+                </a>
+                &nbsp;based on the utility classes from Tailwind CSS and components from Flowbite.
               </p>
             </Accordion.Content>
           </Accordion.Panel>
@@ -240,13 +240,13 @@ const AccordionPage: FC = () => {
                 buttons, dropdowns, modals, navbars, and more.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out this guide to learn how to{' '}
+                Check out this guide to learn how to
                 <a
                   href="https://flowbite.com/docs/getting-started/introduction/"
                   className="text-blue-600 hover:underline dark:text-blue-500"
                 >
                   get started
-                </a>{' '}
+                </a>
                 and start developing websites even faster with components on top of Tailwind CSS.
               </p>
             </Accordion.Content>
@@ -259,11 +259,11 @@ const AccordionPage: FC = () => {
                 library has a design equivalent in our Figma file.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out the{' '}
+                Check out the&nbsp;
                 <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
                   Figma design system
-                </a>{' '}
-                based on the utility classes from Tailwind CSS and components from Flowbite.
+                </a>
+                &nbsp;based on the utility classes from Tailwind CSS and components from Flowbite.
               </p>
             </Accordion.Content>
           </Accordion.Panel>
@@ -314,14 +314,14 @@ const AccordionPage: FC = () => {
                 buttons, dropdowns, modals, navbars, and more.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out this guide to learn how to{' '}
+                Check out this guide to learn how to&nbsp;
                 <a
                   href="https://flowbite.com/docs/getting-started/introduction/"
                   className="text-blue-600 hover:underline dark:text-blue-500"
                 >
                   get started
-                </a>{' '}
-                and start developing websites even faster with components on top of Tailwind CSS.
+                </a>
+                &nbsp;and start developing websites even faster with components on top of Tailwind CSS.
               </p>
             </Accordion.Content>
           </Accordion.Panel>
@@ -333,11 +333,11 @@ const AccordionPage: FC = () => {
                 library has a design equivalent in our Figma file.
               </p>
               <p className="text-gray-500 dark:text-gray-400">
-                Check out the{' '}
+                Check out the&nbsp;
                 <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
                   Figma design system
-                </a>{' '}
-                based on the utility classes from Tailwind CSS and components from Flowbite.
+                </a>
+                &nbsp;based on the utility classes from Tailwind CSS and components from Flowbite.
               </p>
             </Accordion.Content>
           </Accordion.Panel>

diff --git a/src/docs/pages/ButtonGroupPage.tsx b/src/docs/pages/ButtonGroupPage.tsx
@@ -21,13 +21,16 @@ const ButtonGroupPage: FC = () => {
       code: (
         <Button.Group>
           <Button color="gray">
-            <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+            <HiUserCircle className="mr-3 h-4 w-4" />
+            Profile
           </Button>
           <Button color="gray">
-            <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+            <HiAdjustments className="mr-3 h-4 w-4" />
+            Settings
           </Button>
           <Button color="gray">
-            <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+            <HiCloudDownload className="mr-3 h-4 w-4" />
+            Messages
           </Button>
         </Button.Group>
       ),
@@ -82,35 +85,44 @@ const ButtonGroupPage: FC = () => {
         <div className="flex flex-wrap gap-2">
           <Button.Group outline>
             <Button color="gray">
-              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+              <HiUserCircle className="mr-3 h-4 w-4" />
+              Profile
             </Button>
             <Button color="gray">
-              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+              <HiAdjustments className="mr-3 h-4 w-4" />
+              Settings
             </Button>
             <Button color="gray">
-              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+              <HiCloudDownload className="mr-3 h-4 w-4" />
+              Messages
             </Button>
           </Button.Group>
           <Button.Group outline>
             <Button gradientMonochrome="info">
-              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+              <HiUserCircle className="mr-3 h-4 w-4" />
+              Profile
             </Button>
             <Button gradientMonochrome="info">
-              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+              <HiAdjustments className="mr-3 h-4 w-4" />
+              Settings
             </Button>
             <Button gradientMonochrome="info">
-              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+              <HiCloudDownload className="mr-3 h-4 w-4" />
+              Messages
             </Button>
           </Button.Group>
           <Button.Group outline>
             <Button gradientDuoTone="cyanToBlue">
-              <HiUserCircle className="mr-3 h-4 w-4" /> Profile
+              <HiUserCircle className="mr-3 h-4 w-4" />
+              Profile
             </Button>
             <Button gradientDuoTone="cyanToBlue">
-              <HiAdjustments className="mr-3 h-4 w-4" /> Settings
+              <HiAdjustments className="mr-3 h-4 w-4" />
+              Settings
             </Button>
             <Button gradientDuoTone="cyanToBlue">
-              <HiCloudDownload className="mr-3 h-4 w-4" /> Messages
+              <HiCloudDownload className="mr-3 h-4 w-4" />
+              Messages
             </Button>
           </Button.Group>
         </div>

diff --git a/src/docs/pages/FormsPage.tsx b/src/docs/pages/FormsPage.tsx
@@ -104,7 +104,7 @@ const FormsPage: FC = () => {
           <div className="flex items-center gap-2">
             <Checkbox id="agree" />
             <Label htmlFor="agree">
-              I agree with the{' '}
+              I agree with the&nbsp;
               <a href="/forms" className="text-blue-600 hover:underline dark:text-blue-500">
                 terms and conditions
               </a>
@@ -128,7 +128,7 @@ const FormsPage: FC = () => {
             required
             helperText={
               <>
-                We’ll never share your details. Read our{' '}
+                We’ll never share your details. Read our
                 <a href="/forms" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
                   Privacy Policy
                 </a>
@@ -300,7 +300,7 @@ const FormsPage: FC = () => {
           <div className="flex items-center gap-2">
             <Checkbox id="accept" defaultChecked />
             <Label htmlFor="accept">
-              I agree to the{' '}
+              I agree to the&nbsp;
               <a href="/forms" className="text-blue-600 hover:underline dark:text-blue-500">
                 terms and conditions
               </a>
@@ -322,7 +322,7 @@ const FormsPage: FC = () => {
               <Label htmlFor="shipping">Free shipping via Flowbite</Label>
               <div className="text-gray-500 dark:text-gray-300">
                 <span className="text-xs font-normal">
-                  For orders shipped from Flowbite from <span className="font-medium">€ 25</span> in books or{' '}
+                  For orders shipped from Flowbite from <span className="font-medium">€ 25</span> in books or&nbsp;
                   <span>€ 29</span> on other categories
                 </span>
               </div>

diff --git a/src/docs/pages/ModalPage.tsx b/src/docs/pages/ModalPage.tsx
@@ -137,7 +137,7 @@ const ModalPage: FC = () => {
                   <Button>Log in to your account</Button>
                 </div>
                 <div className="text-sm font-medium text-gray-500 dark:text-gray-300">
-                  Not registered?{' '}
+                  Not registered?&nbsp;
                   <a href="/modal" className="text-blue-700 hover:underline dark:text-blue-500">
                     Create account
                   </a>

diff --git a/src/lib/components/Accordion/Accordion.stories.tsx b/src/lib/components/Accordion/Accordion.stories.tsx
@@ -25,14 +25,14 @@ const Template: Story<AccordionProps> = (args) => (
           dropdowns, modals, navbars, and more.
         </p>
         <p className="text-gray-500 dark:text-gray-400">
-          Check out this guide to learn how to{' '}
+          Check out this guide to learn how to&nbsp;
           <a
             href="https://flowbite.com/docs/getting-started/introduction/"
             className="text-blue-600 hover:underline dark:text-blue-500"
           >
             get started
-          </a>{' '}
-          and start developing websites even faster with components on top of Tailwind CSS.
+          </a>
+          &nbsp;and start developing websites even faster with components on top of Tailwind CSS.
         </p>
       </Accordion.Content>
     </Accordion.Panel>
@@ -44,11 +44,11 @@ const Template: Story<AccordionProps> = (args) => (
           has a design equivalent in our Figma file.
         </p>
         <p className="text-gray-500 dark:text-gray-400">
-          Check out the{' '}
+          Check out the&nbsp;
           <a href="https://flowbite.com/figma/" className="text-blue-600 hover:underline dark:text-blue-500">
             Figma design system
-          </a>{' '}
-          based on the utility classes from Tailwind CSS and components from Flowbite.
+          </a>
+          &nbsp;based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
       </Accordion.Content>
     </Accordion.Panel>

diff --git a/src/lib/components/Modal/Modal.stories.tsx b/src/lib/components/Modal/Modal.stories.tsx
@@ -67,7 +67,7 @@ PopUp.args = {
         </h3>
         <div className="flex justify-center gap-4">
           <Button color="red" onClick={action('close')}>
-            {"Yes, I'm sure"}
+            Yes, I&apos;m sure
           </Button>
           <Button color="gray" onClick={action('close')}>
             No, cancel
@@ -112,7 +112,7 @@ FormElements.args = {
             <Button>Log in to your account</Button>
           </div>
           <div className="text-sm font-medium text-gray-500 dark:text-gray-300">
-            Not registered?{' '}
+            Not registered?&nbsp;
             <a href="/modal" className="text-blue-700 hover:underline dark:text-blue-500">
               Create account
             </a>