fix(kradio): show-card-radio and card-orientation props [KHCP-13540] (#…

…2504) * fix(kradio): show-card-radio and card-orientation props [KHCP-13540] * test(kradio): update component tests [KHCP-13540] * docs(kradio): update component docs [KHCP-13540] * fix: apply pr feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix: address pr feedback * fix: address pr feedback --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Kong · Nov 13, 2024 · 61b1d74 · 61b1d74
1 parent 94bc295
commit 61b1d74
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 34 deletions.
diff --git a/docs/components/radio.md b/docs/components/radio.md
@@ -171,6 +171,122 @@ const cardRadio = ref<string>('')
 </script>
 ```
 
+### cardOrientation
+
+Used alongside the [`card` prop](/components/radio#card) to set the orientation of the card layout.
+
+Accepted values are `vertical` (shown above) or `horizontal`. Defaults to `vertical`.
+
+<KRadio
+  v-model="horizontalCard"
+  card
+  card-orientation="horizontal"
+  description="Choose this option if you want your APIs to only be accessible from within your private network."
+  label="Private"
+  selected-value="private"
+>
+  <KBadge appearance="success">
+    Recommended
+  </KBadge>
+</KRadio>
+<KRadio
+  v-model="horizontalCard"
+  card
+  card-orientation="horizontal"
+  description="Choose this option if you want your APIs to be publicly accessible by anyone on the internet."
+  label="Public"
+  selected-value="public"
+/>
+
+```html
+<KRadio
+  card-orientation="horizontal"
+  v-model="cardRadio"
+  description="Choose this option if you want your APIs to only be accessible from within your private network."
+  card
+  label="Private"
+  selected-value="private"
+>
+  <KBadge appearance="success">
+    Recommended
+  </KBadge>
+</KRadio>
+<KRadio
+  card-orientation="horizontal"
+  v-model="cardRadio"
+  description="Choose this option if you want your APIs to be publicly accessible by anyone on the internet."
+  label="Public"
+  card
+  selected-value="public"
+/>
+```
+
+### cardRadioVisible
+
+Prop to show or hide radio button in card. Default value is `true`.
+
+Vertical:
+<div class="cards-container">
+  <KRadio
+    v-model="showRadioVertical"
+    card
+    :card-radio-visible="false"
+    description="Choose this option if you want your APIs to only be accessible from within your private network."
+    label="Private"
+    :selected-value="false"
+  />
+  <KRadio
+    v-model="showRadioVertical"
+    card
+    :card-radio-visible="false"
+    description="Choose this option if you want your APIs to be publicly accessible by anyone on the internet."
+    label="Public"
+    :selected-value="true"
+  />
+</div>
+
+Horizontal:
+<div class="vertical-spacing">
+  <KRadio
+    v-model="showRadioHorizontal"
+    card
+    card-orientation="horizontal"
+    :card-radio-visible="false"
+    description="Choose this option if you want your APIs to only be accessible from within your private network."
+    label="Private"
+    :selected-value="false"
+  />
+  <KRadio
+    v-model="showRadioHorizontal"
+    card
+    card-orientation="horizontal"
+    :card-radio-visible="false"
+    description="Choose this option if you want your APIs to be publicly accessible by anyone on the internet."
+    label="Public"
+    :selected-value="true"
+  />
+</div>
+
+```html
+<KRadio
+  :card-radio-visible="false"
+  v-model="radioCard"
+  card
+  label="Vertical"
+  description="Vertical radio card with hidden radio button."
+  :selected-value="false"
+/>
+<KRadio
+  :card-radio-visible="false"
+  v-model="radioCard"
+  card
+  card-orientation="horizontal"
+  label="Horizontal"
+  description="Horizontal radio card with hidden radio button."
+  :selected-value="true"
+/>
+```
+
 ## Slots
 
 ### default
@@ -190,12 +306,18 @@ Content passed in to the `default` slot will be shown as the label content. The
   Label goes here. The radio is {{ checked ? "selected" : "not selected" }}
 </KRadio>
 ```
+
 :::warning NOTE
 To preserve a valid HTML structure, avoid slotting in block-level elements such as a `div` into the `default` slot as it will be rendered inside a `label` element. This also applies to card-style radio.
 :::
 
 :::tip TIP
-When `card` prop is true, the content passed to the `default` slot will render directly above the label. Should you want to customize the layout inside the card you can omit using the `label` and `description` props and style content passed through the `default` slot yourself.
+When `card` prop is true, the content passed to the `default` slot be will rendered:
+
+* directly above the label if [`cardOrientation` prop](#cardorientation) is `vertical`
+* to the right of label and description of `cardOrientation` prop is `horizontal`
+
+Should you want to customize the layout inside the card you can omit the `label` and `description` props and style content passed through the `default` slot yourself.
 :::
 
 ### description
@@ -259,6 +381,11 @@ const defaultSlotModelValue = ref<boolean>(false)
 
 const cardRadio = ref<string>('')
 
+const horizontalCard = ref<string>('')
+
+const showRadioVertical = ref<boolean | null>(null)
+const showRadioHorizontal = ref<boolean | null>(null)
+
 const labelPropRadio = ref<boolean>(false)
 
 const descriptionPropRadio = ref<boolean>(false)

diff --git a/sandbox/pages/SandboxRadio.vue b/sandbox/pages/SandboxRadio.vue
@@ -185,6 +185,51 @@
           </KRadio>
         </div>
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="cardOrientation">
+        <KRadio
+          v-model="modelValue4"
+          card
+          card-orientation="horizontal"
+          description="Lorem ipsum dolor sit amet."
+          label="Horizontal 1"
+          :selected-value="true"
+        >
+          <KBadge appearance="success">
+            Recommended
+          </KBadge>
+        </KRadio>
+        <KRadio
+          v-model="modelValue4"
+          card
+          card-orientation="horizontal"
+          description="Lorem ipsum dolor sit amet."
+          label="Horizontal 2"
+          :selected-value="false"
+        >
+          <KBadge appearance="info">
+            Default
+          </KBadge>
+        </KRadio>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="cardRadioVisible">
+        <KRadio
+          v-model="modelValue3"
+          card
+          :card-radio-visible="false"
+          description="Lorem ipsum dolor sit amet."
+          label="Vertical"
+          :selected-value="false"
+        />
+        <KRadio
+          v-model="modelValue3"
+          card
+          card-orientation="horizontal"
+          :card-radio-visible="false"
+          description="Lorem ipsum dolor sit amet."
+          label="Horizontal"
+          :selected-value="true"
+        />
+      </SandboxSectionComponent>
       <SandboxSectionComponent title="labelAttributes">
         <div class="vertical-spacing">
           <KRadio
@@ -258,9 +303,11 @@ import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
 import { KongIcon, LockIcon } from '@kong/icons'
 
-const modelValue0 = ref('foobar')
-const modelValue1 = ref('barfoo')
-const modelValue2 = ref('card0')
+const modelValue0 = ref<string>('foobar')
+const modelValue1 = ref<string>('barfoo')
+const modelValue2 = ref<string>('card0')
+const modelValue3 = ref<boolean>(false)
+const modelValue4 = ref<boolean>(true)
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/KRadio/KRadio.cy.ts b/src/components/KRadio/KRadio.cy.ts
@@ -55,10 +55,11 @@ describe('KRadio', () => {
       },
     })
 
+    cy.get('.radio-card').should('have.class', 'card-vertical')
     cy.get('.radio-card').should('contain.text', slotText)
   })
 
-  it('renders input element hidden when card prop is true', () => {
+  it('renders input element when card prop is true', () => {
     cy.mount(KRadio, {
       props: {
         modelValue: false,
@@ -68,9 +69,38 @@ describe('KRadio', () => {
       },
     })
 
+    cy.get('input').should('be.visible')
+  })
+
+  it('renders input element hidden when cardRadioVisible prop is false', () => {
+    cy.mount(KRadio, {
+      props: {
+        modelValue: false,
+        selectedValue: true,
+        card: true,
+        cardRadioVisible: false,
+        label: 'Some label',
+      },
+    })
+
     cy.get('input').should('not.be.visible')
   })
 
+  it('renders card in horizontal orientation when cardOrientation prop is horizontal', () => {
+    cy.mount(KRadio, {
+      props: {
+        modelValue: false,
+        selectedValue: true,
+        card: true,
+        label: 'Some label',
+        cardOrientation: 'horizontal',
+      },
+    })
+
+    cy.get('.radio-card').should('not.have.class', 'card-vertical')
+    cy.get('.radio-card').should('have.class', 'card-horizontal')
+  })
+
   it('emits checked value on click within entire label element when card prop is true', () => {
     cy.mount(KRadio, {
       props: {