feat: update hint text styles [MDS-789] (#2474)

coingaming · Nov 9, 2023 · 814f4a4 · 814f4a4
1 parent 54a7d70
commit 814f4a4
Show file tree

Hide file tree

Showing 35 changed files with 2,199 additions and 1,012 deletions.
diff --git a/next-docs/pages/components/textarea.tsx b/next-docs/pages/components/textarea.tsx
@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import Preview from '../../components/codePreview/Preview';
 import ComponentPageDescription from '../../components/ComponentPageDescription';
+import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Customization from '../../public/examples/textarea/Customization';
 import Default from '../../public/examples/textarea/Default';
-import Disabled from '../../public/examples/textarea/Disabled';
+import States from '../../public/examples/textarea/States';
 import WithBtn from '../../public/examples/textarea/WithBtn';
 import useComponent from '../../utils/useComponent';
-import type { ComponentNames } from '../../components/getComponent';
 
 const COMPONENT_NAME: ComponentNames = 'Textarea';
 
@@ -30,9 +30,9 @@ const PageTextarea = () => {
         code={examples ? examples.Default : 'Loading'}
       />
       <Preview
-        title="Disabled"
-        preview={<Disabled />}
-        code={examples ? examples.Disabled : 'Loading'}
+        title="States"
+        preview={<States />}
+        code={examples ? examples.States : 'Loading'}
       />
       <Preview
         title="Customization"

diff --git a/next-docs/public/examples/authCode/ErrorState.tsx b/next-docs/public/examples/authCode/ErrorState.tsx
@@ -3,6 +3,7 @@ import { AuthCode, Form, Hint } from '@heathmont/moon-core-tw';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { GenericInfo } from '@heathmont/moon-icons-tw';
 
 const schema = z.object({
   authCode: z.string().min(3, { message: 'Must be 3 or more characters long' }),
@@ -40,7 +41,8 @@ const Example = () => {
           <>
             <AuthCode {...field} isValid={isValid} />
             {!isValid && (
-              <Hint error className="!ps-0">
+              <Hint error>
+                <GenericInfo />
                 {errors.authCode?.message}
               </Hint>
             )}

diff --git a/next-docs/public/examples/authCode/Hint.tsx b/next-docs/public/examples/authCode/Hint.tsx
@@ -9,7 +9,7 @@ const Example = () => {
   return (
     <div className="flex items-center flex-col">
       <AuthCode onChange={handleOnChange} />
-      <Hint className="!ps-0">Hint message</Hint>
+      <Hint>Hint message</Hint>
     </div>
   );
 };

diff --git a/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/authCode/__tests__/__snapshots__/index.test.tsx.snap
@@ -468,9 +468,24 @@ Object {
             />
           </div>
           <p
-            class="inline-block mt-2 ps-4 text-moon-12 text-chichi !ps-0"
+            class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-chichi"
             role="alert"
-          />
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 32 32"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16 21.2778V14.9444M16 12.3056V10.7222M25.5 16C25.5 21.2467 21.2467 25.5 16 25.5C10.7533 25.5 6.5 21.2467 6.5 16C6.5 10.7533 10.7533 6.5 16 6.5C21.2467 6.5 25.5 10.7533 25.5 16Z"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </p>
         </form>
       </div>
     </div>
@@ -541,9 +556,24 @@ Object {
           />
         </div>
         <p
-          class="inline-block mt-2 ps-4 text-moon-12 text-chichi !ps-0"
+          class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-chichi"
           role="alert"
-        />
+        >
+          <svg
+            fill="none"
+            height="1em"
+            viewBox="0 0 32 32"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 21.2778V14.9444M16 12.3056V10.7222M25.5 16C25.5 21.2467 21.2467 25.5 16 25.5C10.7533 25.5 6.5 21.2467 6.5 16C6.5 10.7533 10.7533 6.5 16 6.5C21.2467 6.5 25.5 10.7533 25.5 16Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </p>
       </form>
     </div>
   </div>,
@@ -1141,7 +1171,7 @@ Object {
             />
           </div>
           <p
-            class="inline-block mt-2 ps-4 text-moon-12 text-trunks !ps-0"
+            class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-trunks"
             role="alert"
           >
             Hint message
@@ -1216,7 +1246,7 @@ Object {
           />
         </div>
         <p
-          class="inline-block mt-2 ps-4 text-moon-12 text-trunks !ps-0"
+          class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-trunks"
           role="alert"
         >
           Hint message
@@ -2525,9 +2555,24 @@ Object {
           />
         </div>
         <p
-          class="inline-block mt-2 ps-4 text-moon-12 text-chichi !ps-0"
+          class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-chichi"
           role="alert"
-        />
+        >
+          <svg
+            fill="none"
+            height="1em"
+            viewBox="0 0 32 32"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 21.2778V14.9444M16 12.3056V10.7222M25.5 16C25.5 21.2467 21.2467 25.5 16 25.5C10.7533 25.5 6.5 21.2467 6.5 16C6.5 10.7533 10.7533 6.5 16 6.5C21.2467 6.5 25.5 10.7533 25.5 16Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </p>
       </form>
     </div>
   </body>,
@@ -2594,9 +2639,24 @@ Object {
         />
       </div>
       <p
-        class="inline-block mt-2 ps-4 text-moon-12 text-chichi !ps-0"
+        class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-chichi"
         role="alert"
-      />
+      >
+        <svg
+          fill="none"
+          height="1em"
+          viewBox="0 0 32 32"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16 21.2778V14.9444M16 12.3056V10.7222M25.5 16C25.5 21.2467 21.2467 25.5 16 25.5C10.7533 25.5 6.5 21.2467 6.5 16C6.5 10.7533 10.7533 6.5 16 6.5C21.2467 6.5 25.5 10.7533 25.5 16Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </p>
     </form>
   </div>,
   "debug": [Function],
@@ -3174,7 +3234,7 @@ Object {
           />
         </div>
         <p
-          class="inline-block mt-2 ps-4 text-moon-12 text-trunks !ps-0"
+          class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-trunks"
           role="alert"
         >
           Hint message
@@ -3245,7 +3305,7 @@ Object {
         />
       </div>
       <p
-        class="inline-block mt-2 ps-4 text-moon-12 text-trunks !ps-0"
+        class="flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-trunks"
         role="alert"
       >
         Hint message

diff --git a/next-docs/public/examples/combobox/InsetSelectStates.tsx b/next-docs/public/examples/combobox/InsetSelectStates.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
-import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+import {
+  ControlsChevronDownSmall,
+  GenericInfo,
+} from '@heathmont/moon-icons-tw';
 
 const people = [
   { id: 1, label: 'Wade Cooper', value: 'Wade Cooper' },
@@ -80,7 +83,11 @@ const Example = () => {
                 )}
               </Combobox.Options>
             </Combobox.Transition>
-            <Combobox.Hint>Informative message holder</Combobox.Hint>
+            <Combobox.Hint>
+              {' '}
+              <GenericInfo />
+              Informative message holder
+            </Combobox.Hint>
           </>
         )}
       </Combobox>

diff --git a/next-docs/public/examples/combobox/SelectStates.tsx b/next-docs/public/examples/combobox/SelectStates.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
-import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+import {
+  ControlsChevronDownSmall,
+  GenericInfo,
+} from '@heathmont/moon-icons-tw';
 
 const people = [
   { id: 1, label: 'Wade Cooper', value: 'Wade Cooper' },
@@ -79,7 +82,10 @@ const Example = () => {
                 )}
               </Combobox.Options>
             </Combobox.Transition>
-            <Combobox.Hint>Informative message holder</Combobox.Hint>
+            <Combobox.Hint>
+              <GenericInfo />
+              Informative message holder
+            </Combobox.Hint>
           </>
         )}
       </Combobox>
@@ -159,6 +165,7 @@ const Example = () => {
                 )}
               </Combobox.Options>
             </Combobox.Transition>
+            <Combobox.Hint>Informative message holder</Combobox.Hint>
           </>
         )}
       </Combobox>