Add RadioCard to storybook (baserow#4305)

Co-authored-by: Jonathan Adeline <jonathan@baserow.io>

Author: stribny

web-frontend/modules/core/assets/scss/components/radio_card.scss

@@ -21,6 +21,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
 }
 
 .radio-card__labels {
@@ -37,8 +38,13 @@
   font-weight: 500;
 }
 
+.radio-card__badge {
+  min-width: 0;
+}
+
 .radio-card__description {
   color: $palette-neutral-900;
   line-height: 20px;
   font-size: 12px;
+  word-break: break-word;
 }

web-frontend/modules/core/components/RadioCard.vue

@@ -6,8 +6,8 @@
     <div class="radio-card__content">
       <div class="radio-card__labels">
         <label class="radio-card__label">{{ label }}</label>
-        <div v-if="sideLabel">
-          <Badge :rounded="true" :small="true">{{ sideLabel }}</Badge>
+        <div v-if="badgeLabel" class="radio-card__badge">
+          <Badge :rounded="true" :small="true">{{ badgeLabel }}</Badge>
         </div>
       </div>
       <div v-if="hasSlot" class="radio-card__description">
@@ -39,7 +39,7 @@ export default {
       type: String,
       required: true,
     },
-    sideLabel: {
+    badgeLabel: {
       type: String,
       required: false,
       default: undefined,

web-frontend/modules/core/components/settings/twoFactorAuth/EnableTwoFactorOptions.vue

@@ -6,7 +6,7 @@
       :value="option.type"
       :model-value="values.twoFaChoice"
       :label="option.name"
-      :side-label="option.sideLabel"
+      :badge-label="option.sideLabel"
       @input="updateValue"
     >
       <div>

web-frontend/stories/RadioCard.stories.mdx

@@ -0,0 +1,103 @@
+import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
+import { config, withDesign } from 'storybook-addon-designs'
+import { action } from '@storybook/addon-actions'
+import { useArgs } from '@storybook/client-api'
+
+import RadioCard from '@baserow/modules/core/components/RadioCard'
+
+<Meta
+    title="Baserow/Form Elements/Radio/RadioCard"
+    component={RadioCard}
+    parameters={{
+        backgrounds: {
+            default: 'white',
+            values: [
+                { name: 'white', value: '#ffffff' },
+                { name: 'light', value: '#eeeeee' },
+                { name: 'dark', value: '#222222' },
+            ],
+        },
+    }}
+    decorators={[
+        withDesign,
+        (story, context) => {
+            const [_, updateArgs] = useArgs()
+            return story({ ...context, updateArgs })
+        },
+    ]}
+    argTypes={{
+        default: {
+            control: 'text',
+            description: 'Slot content',
+            defaultValue: 'Label',
+        },
+        modelValue: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: '',
+        },
+        value: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: 'option1',
+        },
+        label: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: 'Label',
+        },
+        badgeLabel: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: 'Badge label',
+        },
+    }}
+/>
+
+# RadioCard
+
+The RadioCard component behaves like the Radio component but instead of the native circle button, it uses a custom card design.
+
+export const Template = (args, { argTypes, updateArgs }) => ({
+    methods: {
+        action,
+        handleInput(value) {
+            const modelValue = value
+            updateArgs({ ...args, modelValue })
+            action('handleInput')(modelValue)
+        },
+    },
+    components: { RadioCard },
+    props: Object.keys(argTypes),
+    template: `<RadioCard v-bind="$props" @input="handleInput">${args.default}</RadioCard>`,
+})
+
+export const designConfig = {
+    type: 'figma',
+    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=53%3A1852&mode=dev',
+}
+
+<Canvas>
+    <Story
+        name="RadioCard"
+        parameters={{
+            design: config(designConfig),
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Example
+
+```javascript
+<RadioCard></RadioCard>
+```
+
+## Props
+
+<Props of={RadioCard} />