fix(SelectableCard): support tooltip (#1771)

scaleway · Aug 16, 2022 · aca579e · aca579e
1 parent fd3f783
commit aca579e
Show file tree

Hide file tree

Showing 5 changed files with 484 additions and 17 deletions.
diff --git a/.loki/reference/chrome_laptop_Components_Data_Entry_SelectableCard_Tooltip.png b/.loki/reference/chrome_laptop_Components_Data_Entry_SelectableCard_Tooltip.png
diff --git a/src/components/SelectableCard/__stories__/index.stories.tsx b/src/components/SelectableCard/__stories__/index.stories.tsx
@@ -281,6 +281,42 @@ isError.decorators = [
   ),
 ]
 
+export const Tooltip = Template.bind({})
+Tooltip.decorators = [
+  () => (
+    <ControlValue value="label-7">
+      {({ value, onChange }) => (
+        <div style={{ display: 'flex', gap: '16px' }}>
+          <SelectableCard
+            name="label-14"
+            checked={value === 'label-14'}
+            value="label-41"
+            type="radio"
+            tooltip="Click on me!"
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              onChange(event.currentTarget.value)
+            }
+          >
+            Left Radio
+          </SelectableCard>
+          <SelectableCard
+            name="label-15"
+            checked={value === 'label-15'}
+            value="label-15"
+            type="radio"
+            tooltip="No! Click on me instead!"
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              onChange(event.currentTarget.value)
+            }
+          >
+            Right Radio
+          </SelectableCard>
+        </div>
+      )}
+    </ControlValue>
+  ),
+]
+
 export const ComplexChildren = Template.bind({})
 ComplexChildren.parameters = {
   docs: {