feat(kcheckbox): reskin component [KHCP-8973] (#1792)

* chore(sandbox): setup component sandbox [KHCP-8996] * feat(kradio): reskin component - wip [KHCP-8996] * fix(kradio): fix states styling [KHCP-8996] * feat(kradio): reskin component [KHCP-8996] * docs(radio): update component docs [KHCP-8996] * docs(*): minor tweaks [KHCP-8996] * docs: minor fix [KHCP-8996] * fix(kradio): minor tweaks [KHCP-8996] * fix(*): address PR feedback [KHCP-8996] * fix(kradio): rename input class [KHCP-8996] * fix(kradio): classes cleanup [KHCP-8996] * chore(sandbox): setup component sandbox [KHCP-8973] * fix(kcheckbox): remove deprecated props [KHCP-8973] * feat(kcheckbox): reskin component - wip [KHCP-8973] * feat(kcheckbox): reskin component [KHCP-8973] * test(kcheckbox): update component tests [KHCP-8973] * docs(kcheckbox): update component docs [KHCP-8973] * fix(kcheckbox): misc fixes [KHCP-8973] * fix(kcheckbox): minor fixes [KHCP-8973] * fix: bad rebase [KHCP-8973] * fix(*): misc fixes [KHCP-8973] * docs(checkbox): fix indeterminate example [KHCP-8973] * chore(deps): bump @kong/icons [KHCP-8973] * fix(kradio, kcheckbox): rename error class [KHCP-8973] * fix(kcheckbox): address PR feedback [KHCP-8973] * fix(kcheckbox): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> --------- Co-authored-by: Adam DeHaven <[email protected]>
Kong · Oct 27, 2023 · af7c0d5 · af7c0d5
1 parent 1ad89cf
commit af7c0d5
Show file tree

Hide file tree

Showing 10 changed files with 785 additions and 255 deletions.
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -76,6 +76,22 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCheckbox
 
+#### Structure
+
+* `k-input` class has been changed to `checkbox-input`
+* `k-checkbox-label` class has been changed to `checkbox-label`
+* `k-checkbox-description` class has been changed to `checkbox-description`
+* `has-desc` class has been been changed to `has-description`
+
+#### Constants, Types & Interfaces
+
+#### Props
+
+* `testMode` prop has been removed
+
+#### Slots
+
+#### Events
 
 ### KCodeBlock
 

diff --git a/sandbox/components/SandboxNavComponent.vue b/sandbox/components/SandboxNavComponent.vue
@@ -31,6 +31,7 @@ const links = computed((): SandboxNavItem[] => (
     { name: 'KAlert', to: { name: 'alert' } },
     { name: 'KButton', to: { name: 'button' } },
     { name: 'KCatalog', to: { name: 'catalog' } },
+    { name: 'KCheckbox', to: { name: 'checkbox' } },
     { name: 'KDropdown', to: { name: 'dropdown' } },
     { name: 'KInput', to: { name: 'input' } },
     { name: 'KLabel', to: { name: 'label' } },

diff --git a/sandbox/pages/SandboxCheckbox.vue b/sandbox/pages/SandboxCheckbox.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="kcheckbox-sandbox">
+    <SandboxTitleComponent
+      title="KCheckbox"
+    >
+      <template #description>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=283%3A2899&mode=dev">
+          Figma
+        </KExternalLink>
+      </template>
+    </SandboxTitleComponent>
+
+    <div class="grid-container standalone-container">
+      <div class="vertical-spacing">
+        <KCheckbox
+          v-model="modelValue0"
+          label="Label"
+        />
+        <KCheckbox
+          v-model="modelValue0"
+          disabled
+          label="Disabled"
+        />
+        <KCheckbox
+          v-model="modelValue0"
+          error
+          label="Error"
+        />
+        <KCheckbox
+          v-model="modelValue0"
+          disabled
+          error
+          label="Error & Disabled"
+        />
+      </div>
+      <div class="vertical-spacing">
+        <KCheckbox
+          v-model="modelValue1"
+          label="Checked"
+          selected-value="barfoo"
+        />
+        <KCheckbox
+          v-model="modelValue1"
+          disabled
+          label="Checked & Disabled"
+        />
+        <KCheckbox
+          v-model="modelValue1"
+          error
+          label="Checked & Error"
+        />
+        <KCheckbox
+          v-model="modelValue1"
+          disabled
+          error
+          label="Checked & Error & Disabled"
+        />
+      </div>
+    </div>
+
+    <!-- Props -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Props"
+    />
+    <SandboxSectionComponent title="label">
+      <KCheckbox
+        v-model="modelValue2"
+        label="Label"
+      />
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="description">
+      <div class="grid-container">
+        <KCheckbox
+          v-model="modelValue3"
+          description="Very long description that wraps to the next line and ends with lorem ipsum dolor sit amet."
+          label="Label"
+        />
+        <KCheckbox
+          v-model="modelValue3"
+          description="Lorem ipsum dolor sit amet."
+          disabled
+          label="Disabled"
+        />
+        <KCheckbox
+          v-model="modelValue3"
+          description="Lorem ipsum dolor sit amet."
+          error
+          label="Error"
+        />
+        <KCheckbox
+          v-model="modelValue3"
+          description="Lorem ipsum dolor sit amet."
+          disabled
+          error
+          label="Error & Disabled"
+        />
+      </div>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent
+      description="Example"
+      title="indeterminate"
+    >
+      <div class="vertical-spacing">
+        <KCheckbox
+          v-model="indeterminateValueAll"
+          :indeterminate="isIndeterminate"
+          :label="indeterminateValueAll ? 'Uncheck all' : 'Check all'"
+          @change="handleIndeterminateChange"
+        />
+        <KCheckbox
+          v-for="(value, index) in indeterminateValues"
+          :key="index"
+          v-model="indeterminateValues[index].value"
+          :label="indeterminateValues[index].label"
+        />
+      </div>
+      <p>Different states</p>
+      <div class="grid-container standalone-container">
+        <KCheckbox
+          v-model="indeterminateValue"
+          description="Lorem ipsum dolor sit amet."
+          indeterminate
+          label="Label"
+        />
+        <KCheckbox
+          v-model="indeterminateValue"
+          description="Lorem ipsum dolor sit amet."
+          disabled
+          indeterminate
+          label="Disabled"
+        />
+        <KCheckbox
+          v-model="indeterminateValue"
+          description="Lorem ipsum dolor sit amet."
+          error
+          indeterminate
+          label="Error"
+        />
+        <KCheckbox
+          v-model="indeterminateValue"
+          description="Lorem ipsum dolor sit amet."
+          disabled
+          error
+          indeterminate
+          label="Error & Disabled"
+        />
+      </div>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="labelAttributes">
+      <KCheckbox
+        v-model="modelValue4"
+        label="Label"
+        :label-attributes="{ info: 'Tooltip it is' }"
+      />
+    </SandboxSectionComponent>
+
+    <!-- Slots -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Slots"
+    />
+    <SandboxSectionComponent title="default">
+      <KCheckbox
+        v-model="modelValue5"
+      >
+        Label
+      </KCheckbox>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="description">
+      <KCheckbox
+        v-model="modelValue6"
+        label="Label"
+      >
+        <template #description>
+          Lorem ipsum dolor sit amet.
+        </template>
+      </KCheckbox>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="default & description">
+      <KCheckbox
+        v-model="modelValue7"
+      >
+        Label
+        <template #description>
+          Lorem ipsum dolor sit amet.
+        </template>
+      </KCheckbox>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="tooltip">
+      <KCheckbox
+        v-model="modelValue8"
+      >
+        Label
+        <template #tooltip>
+          Lorem ipsum <b>dolor</b> sit amet.
+        </template>
+      </KCheckbox>
+    </SandboxSectionComponent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KCheckbox, KExternalLink } from '@/components'
+
+const modelValue0 = ref<boolean>(false)
+const modelValue1 = ref<boolean>(true)
+const modelValue2 = ref<boolean>(false)
+const modelValue3 = ref<boolean>(false)
+const modelValue4 = ref<boolean>(false)
+const modelValue5 = ref<boolean>(false)
+const modelValue6 = ref<boolean>(false)
+const modelValue7 = ref<boolean>(false)
+const modelValue8 = ref<boolean>(false)
+
+const indeterminateValue = ref<boolean>(false)
+
+// indeterminate example logic
+const indeterminateValueAll = ref<boolean>(false)
+
+const indeterminateValues = ref<Array<Record<string, any>>>([
+  {
+    label: 'Option 1',
+    value: false,
+  },
+  {
+    label: 'Option 2',
+    value: true,
+  },
+  {
+    label: 'Option 3',
+    value: false,
+  },
+])
+
+const isIndeterminate = computed((): boolean => {
+  return !!indeterminateValues.value.filter((value) => value.value).length && !!indeterminateValues.value.filter((value) => !value.value).length
+})
+
+const handleIndeterminateChange = (value: boolean) => {
+  indeterminateValues.value.forEach((val) => {
+    val.value = value
+  })
+}
+
+watch(indeterminateValues, () => {
+  // all are selected
+  if (indeterminateValues.value.filter((value) => value.value).length === indeterminateValues.value.length) {
+    indeterminateValueAll.value = true
+  // all are unselected
+  } else if (indeterminateValues.value.filter((value) => !value.value).length === indeterminateValues.value.length) {
+    indeterminateValueAll.value = false
+  // some are selected
+  } else {
+    indeterminateValueAll.value = false
+  }
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+.kcheckbox-sandbox {
+  .standalone-container {
+    margin-bottom: $kui-space-90;
+  }
+
+  .vertical-spacing {
+    display: flex;
+    flex-direction: column;
+    gap: $kui-space-50;
+  }
+
+  .grid-container {
+    display: grid;
+    gap: $kui-space-50;
+    grid-template-columns: repeat(2, 1fr);
+    /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+    max-width: $kui-breakpoint-tablet;
+  }
+}
+</style>
diff --git a/sandbox/pages/SandboxRadio.vue b/sandbox/pages/SandboxRadio.vue
@@ -110,7 +110,7 @@
       </div>
     </SandboxSectionComponent>
     <SandboxSectionComponent
-      description="KRadio card styling is to be revisited in the next `9.0.0-beta.x` release as design is being finalized."
+      description="KRadio card styling is to be revisited in the next `9.0.0-alpha.x` release as design is being finalized."
       title="card"
     >
       <div class="grid-container">

diff --git a/sandbox/router.ts b/sandbox/router.ts
@@ -28,6 +28,12 @@ export default createRouter({
           meta: { title: 'Catalog Sandbox' },
           component: () => import('./pages/SandboxCatalog.vue'),
         },
+        {
+          path: 'checkbox',
+          name: 'checkbox',
+          meta: { title: 'Checkbox Sandbox' },
+          component: () => import('./pages/SandboxCheckbox.vue'),
+        },
         {
           path: 'dropdown',
           name: 'dropdown',