feat: dqa comments

Orfium · Dec 6, 2023 · 2403bfc · 2403bfc
1 parent e5e8753
commit 2403bfc
Show file tree

Hide file tree

Showing 22 changed files with 25 additions and 122 deletions.
diff --git a/src/__storyshots__/Original Components/Table-FinancialTable.snap b/src/__storyshots__/Original Components/Table-FinancialTable.snap
@@ -65,12 +65,6 @@
   border-radius: 100%;
 }
 
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-4[data-selected='true']>span:last-child,
 .emotion-4[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Original Components/Table-FixedHeaderTable.snap b/src/__storyshots__/Original Components/Table-FixedHeaderTable.snap
@@ -65,12 +65,6 @@
   border-radius: 100%;
 }
 
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-4[data-selected='true']>span:last-child,
 .emotion-4[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Original Components/Table-TableWithExpandableRows.snap b/src/__storyshots__/Original Components/Table-TableWithExpandableRows.snap
@@ -70,12 +70,6 @@
   border-radius: 100%;
 }
 
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-4[data-selected='true']>span:last-child,
 .emotion-4[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Original Components/Table-TableWithExpandableRowsAndSortDir.snap b/src/__storyshots__/Original Components/Table-TableWithExpandableRowsAndSortDir.snap
@@ -70,12 +70,6 @@
   border-radius: 100%;
 }
 
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-4[data-selected='true']>span:last-child,
 .emotion-4[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Original Components/Table-TableWithExpandableRowsExpandedOnPageLoad.snap b/src/__storyshots__/Original Components/Table-TableWithExpandableRowsExpandedOnPageLoad.snap
@@ -65,12 +65,6 @@
   border-radius: 100%;
 }
 
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-4[data-selected='true']>span:last-child,
 .emotion-4[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelHelptext.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelHelptext.snap
@@ -43,12 +43,6 @@
   border-radius: 100%;
 }
 
-.emotion-1[data-selected='true']:hover,
-.emotion-1[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-1[data-selected='true']>span:last-child,
 .emotion-1[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;
@@ -189,7 +183,7 @@
         class="emotion-6"
         data-testid="undefined_radio_label_helpText"
       >
-        This is the helptext of the option
+        Short text that adds context
       </div>
     </div>
   </div>

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelPlacement.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelPlacement.snap
@@ -58,12 +58,6 @@
   border-radius: 100%;
 }
 
-.emotion-2[data-selected='true']:hover,
-.emotion-2[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-2[data-selected='true']>span:last-child,
 .emotion-2[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;
@@ -224,7 +218,7 @@
             class="emotion-6"
             data-testid="undefined_radio_label_label"
           >
-            Option
+            Right Label
           </div>
         </div>
       </div>
@@ -288,7 +282,7 @@
             class="emotion-6"
             data-testid="undefined_radio_label_label"
           >
-            Option
+            Left Label
           </div>
         </div>
       </div>

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelSizes.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-CheckBoxLabelSizes.snap
@@ -58,12 +58,6 @@
   border-radius: 100%;
 }
 
-.emotion-2[data-selected='true']:hover,
-.emotion-2[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-2[data-selected='true']>span:last-child,
 .emotion-2[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;
@@ -218,7 +212,7 @@
             class="emotion-6"
             data-testid="undefined_radio_label_label"
           >
-            Normal Option
+            Normal Label
           </div>
         </div>
       </div>
@@ -282,7 +276,7 @@
             class="emotion-13"
             data-testid="undefined_radio_label_label"
           >
-            Large Option
+            Large Label
           </div>
         </div>
       </div>

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-DisabledCheckBox.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-DisabledCheckBox.snap
@@ -60,12 +60,6 @@
   border-radius: 100%;
 }
 
-.emotion-2[data-selected='true']:hover,
-.emotion-2[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-2[data-selected='true']>span:last-child,
 .emotion-2[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-IndeterminateCheckBox.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-IndeterminateCheckBox.snap
@@ -58,12 +58,6 @@
   border-radius: 100%;
 }
 
-.emotion-2[data-selected='true']:hover,
-.emotion-2[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-2[data-selected='true']>span:last-child,
 .emotion-2[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-Playground.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-Playground.snap
@@ -57,12 +57,6 @@
   border-radius: 100%;
 }
 
-.emotion-2[data-selected='true']:hover,
-.emotion-2[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-2[data-selected='true']>span:last-child,
 .emotion-2[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/Controls/CheckBox-SimpleCheckBox.snap b/src/__storyshots__/Updated Components/Controls/CheckBox-SimpleCheckBox.snap
@@ -43,12 +43,6 @@
   border-radius: 100%;
 }
 
-.emotion-1[data-selected='true']:hover,
-.emotion-1[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-1[data-selected='true']>span:last-child,
 .emotion-1[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/Controls/Switch-SwitchLabelPlacement.snap b/src/__storyshots__/Updated Components/Controls/Switch-SwitchLabelPlacement.snap
@@ -214,7 +214,7 @@
             class="emotion-3"
             data-testid="undefined_radio_undefined_label"
           >
-            Option
+            Right Label
           </div>
         </div>
       </label>
@@ -252,7 +252,7 @@
             class="emotion-3"
             data-testid="undefined_radio_undefined_label"
           >
-            Option
+            Left Label
           </div>
         </div>
       </label>

diff --git a/src/__storyshots__/Updated Components/Controls/Switch-SwitchLabelSizes.snap b/src/__storyshots__/Updated Components/Controls/Switch-SwitchLabelSizes.snap
@@ -156,7 +156,7 @@
             class="emotion-3"
             data-testid="undefined_radio_undefined_label"
           >
-            Normal Option
+            Normal Label
           </div>
         </div>
       </label>
@@ -194,7 +194,7 @@
             class="emotion-7"
             data-testid="undefined_radio_undefined_label"
           >
-            Large Option
+            Large Label
           </div>
         </div>
       </label>

diff --git a/src/__storyshots__/Updated Components/Controls/Switch-SwitchWithHelptext.snap b/src/__storyshots__/Updated Components/Controls/Switch-SwitchWithHelptext.snap
@@ -127,7 +127,7 @@
         class="emotion-3"
         data-testid="undefined_radio_undefined_helpText"
       >
-        This is the helptext of the option
+        Short text that adds context
       </div>
     </div>
   </label>

diff --git a/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap b/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap
@@ -401,12 +401,6 @@
   border-radius: 100%;
 }
 
-.emotion-19[data-selected='true']:hover,
-.emotion-19[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-19[data-selected='true']>span:last-child,
 .emotion-19[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap b/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap
@@ -339,12 +339,6 @@
   border-radius: 100%;
 }
 
-.emotion-37[data-selected='true']:hover,
-.emotion-37[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-37[data-selected='true']>span:last-child,
 .emotion-37[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/components/Controls/CheckBox/CheckBox.mdx b/src/components/Controls/CheckBox/CheckBox.mdx
@@ -23,10 +23,7 @@ A universal CheckBox component that the input component for any forms.
 
 <UsageGuidelines
   guidelines={['Use if you have multiple options and need to select 1+ items.']}
-  policies={[
-    'If you can select exactly 1 items use radio buttons',
-    'If you can select exactly 1 item from the multiple options, use radio buttons',
-  ]}
+  policies={['If you can select exactly 1 items use radio buttons']}
 />
 
 <SubsectionHeader title="Variants" />

diff --git a/src/components/Controls/CheckBox/CheckBox.stories.tsx b/src/components/Controls/CheckBox/CheckBox.stories.tsx
@@ -89,11 +89,11 @@ export const CheckBoxLabelPlacement = {
   render: () => (
     <>
       <Stack height={50}>
-        <CheckBox value="label">Option</CheckBox>
+        <CheckBox value="label">Right Label</CheckBox>
       </Stack>
       <Stack>
         <CheckBox value="label" labelConfig={{ placement: 'left' }}>
-          Option
+          Left Label
         </CheckBox>
       </Stack>
     </>
@@ -106,11 +106,11 @@ export const CheckBoxLabelSizes = {
   render: () => (
     <>
       <Stack height={50}>
-        <CheckBox value="label">Normal Option</CheckBox>
+        <CheckBox value="label">Normal Label</CheckBox>
       </Stack>
       <Stack>
         <CheckBox value="label" labelConfig={{ size: 'large' }}>
-          Large Option
+          Large Label
         </CheckBox>
       </Stack>
     </>
@@ -121,7 +121,7 @@ export const CheckBoxLabelSizes = {
 
 export const CheckBoxLabelHelptext = {
   render: () => (
-    <CheckBox value="label" labelConfig={{ helpText: 'This is the helptext of the option' }}>
+    <CheckBox value="label" labelConfig={{ helpText: 'Short text that adds context' }}>
       Option
     </CheckBox>
   ),

diff --git a/src/components/Controls/CheckBox/CheckBox.style.ts b/src/components/Controls/CheckBox/CheckBox.style.ts
@@ -67,11 +67,6 @@ export const checkboxStyles =
 
       &[data-selected='true'],
       &[data-indeterminate='true'] {
-        &:hover {
-          background: none;
-          box-shadow: none;
-        }
-
         & > span:last-child {
           transition: all 0.2s;
 

diff --git a/src/components/Controls/CheckBox/__snapshots__/CheckBox.test.tsx.snap b/src/components/Controls/CheckBox/__snapshots__/CheckBox.test.tsx.snap
@@ -46,12 +46,6 @@ exports[`Checkbox Component > it renders the Checkbox correctly 1`] = `
   border-radius: 100%;
 }
 
-.emotion-1[data-selected='true']:hover,
-.emotion-1[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
 .emotion-1[data-selected='true']>span:last-child,
 .emotion-1[data-indeterminate='true']>span:last-child {
   -webkit-transition: all 0.2s;

diff --git a/src/components/Controls/Switch/Switch.stories.tsx b/src/components/Controls/Switch/Switch.stories.tsx
@@ -1,8 +1,9 @@
-import { FIGMA_URL } from 'utils/common';
+import { FIGMA_URL } from '../../../utils/common';
 import Switch from './Switch';
 import { useState } from 'react';
-import Stack from 'components/storyUtils/Stack';
+import Stack from '../../storyUtils/Stack';
 import { boolean, select, text } from '@storybook/addon-knobs';
+import React from 'react';
 
 export default {
   title: 'Updated Components/Controls/Switch',
@@ -35,10 +36,10 @@ export const SwitchLabelPlacement = {
     return (
       <>
         <Stack height={50}>
-          <Switch>Option</Switch>
+          <Switch>Right Label</Switch>
         </Stack>
         <Stack>
-          <Switch labelConfig={{ placement: 'left' }}>Option</Switch>
+          <Switch labelConfig={{ placement: 'left' }}>Left Label</Switch>
         </Stack>
       </>
     );
@@ -51,10 +52,10 @@ export const SwitchLabelSizes = {
     return (
       <>
         <Stack height={50}>
-          <Switch>Normal Option</Switch>
+          <Switch>Normal Label</Switch>
         </Stack>
         <Stack>
-          <Switch labelConfig={{ size: 'large' }}>Large Option</Switch>
+          <Switch labelConfig={{ size: 'large' }}>Large Label</Switch>
         </Stack>
       </>
     );
@@ -64,7 +65,7 @@ export const SwitchLabelSizes = {
 
 export const SwitchWithHelptext = {
   render: () => {
-    return <Switch labelConfig={{ helpText: 'This is the helptext of the option' }}>Option</Switch>;
+    return <Switch labelConfig={{ helpText: 'Short text that adds context' }}>Option</Switch>;
   },
   name: 'Switch with helptext',
 };
@@ -105,4 +106,4 @@ export const Playground = {
     );
   },
   name: 'Playground',
-};
+};