Skip to content

Commit

Permalink
chore(sandbox): rebase [KHCP-8971]
Browse files Browse the repository at this point in the history
  • Loading branch information
@portikM
portikM committed Nov 15, 2023
1 parent 0502d08 commit d050349
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 108 deletions.
1 change: 1 addition & 0 deletions sandbox/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ app.component('SandboxLayout', SandboxLayout)
const sandboxAppLinks: SandboxNavigationItem[] = ([
{ name: 'KAlert', to: { name: 'alert' } },
{ name: 'KButton', to: { name: 'button' } },
{ name: 'KCard', to: { name: 'card' } },
{ name: 'KCatalog', to: { name: 'catalog' } },
{ name: 'KCheckbox', to: { name: 'checkbox' } },
{ name: 'KDropdown', to: { name: 'dropdown' } },
Expand Down
221 changes: 113 additions & 108 deletions sandbox/pages/SandboxCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,130 @@
<template>
<div class="kcard-sandbox">
<SandboxTitleComponent
title="KCard"
>
<template #description>
<KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
Figma
</KExternalLink>
</template>
</SandboxTitleComponent>
<SandboxLayout
:links="inject('app-links', [])"
title="KButton"
>
<div class="kcard-sandbox">
<SandboxTitleComponent
title="KCard"
>
<template #description>
<KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
Figma
</KExternalLink>
</template>
</SandboxTitleComponent>

<!-- Props -->
<SandboxTitleComponent
is-subtitle
title="Props"
/>
<SandboxSectionComponent title="title">
<KCard title="Card title">
Card content slot
</KCard>
</SandboxSectionComponent>
<!-- Props -->
<SandboxTitleComponent
is-subtitle
title="Props"
/>
<SandboxSectionComponent title="title">
<KCard title="Card title">
Card content slot
</KCard>
</SandboxSectionComponent>

<!-- Slots -->
<SandboxTitleComponent
is-subtitle
title="Props"
/>
<SandboxSectionComponent title="title & content & actions & footer">
<div>
<KCard>
<template #title>
Card title
</template>
<template #actions>
<KDropdown
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KDropdown', to: { name: 'dropdown' } },
{ label: 'Stay', to: { name: 'card' } }
]"
>
<KButton
appearance="tertiary"
class="icon-button"
size="small"
<!-- Slots -->
<SandboxTitleComponent
is-subtitle
title="Props"
/>
<SandboxSectionComponent title="title & content & actions & footer">
<div>
<KCard>
<template #title>
Card title
</template>
<template #actions>
<KDropdown
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KDropdown', to: { name: 'dropdown' } },
{ label: 'Stay', to: { name: 'card' } }
]"
>
<MoreIcon />
</KButton>
</KDropdown>
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #footer>
<KBadge appearance="success">
Published
</KBadge>
<KBadge>2 versions</KBadge>
<KButton
appearance="tertiary"
class="icon-button"
size="small"
>
<MoreIcon />
</KButton>
</KDropdown>
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #footer>
<KBadge appearance="success">
Published
</KBadge>
<KBadge>2 versions</KBadge>
</template>
</KCard>
</div>
<div class="limit-width">
<KCard>
<template #title>
Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
</template>
<template #actions>
<KDropdown
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KDropdown', to: { name: 'dropdown' } },
{ label: 'Stay', to: { name: 'card' } }
]"
>
<KButton
appearance="tertiary"
class="icon-button"
size="small"
>
<MoreIcon />
</KButton>
</KDropdown>
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #footer>
<CheckIcon
:color="KUI_COLOR_TEXT_SUCCESS"
:size="KUI_ICON_SIZE_40"
/>
Approved
</template>
</KCard>
</div>
</SandboxSectionComponent>

<!-- Legacy -->
<SandboxTitleComponent
is-subtitle
title="Legacy"
/>
<SandboxSectionComponent title="body slot (deprecated)">
<KCard>
When both `default` and `body` slots are present, `default` slot will be used.
<template #body>
And `body` slot will be ignored.
</template>
</KCard>
</div>
<div class="limit-width">
<KCard>
<template #title>
Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
</template>
<template #actions>
<KDropdown
:items="[
{ label: 'Home', to: { name: 'home' } },
{ label: 'KDropdown', to: { name: 'dropdown' } },
{ label: 'Stay', to: { name: 'card' } }
]"
>
<KButton
appearance="tertiary"
class="icon-button"
size="small"
>
<MoreIcon />
</KButton>
</KDropdown>
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #footer>
<CheckIcon
:color="KUI_COLOR_TEXT_SUCCESS"
:size="KUI_ICON_SIZE_40"
/>
Approved
<template #body>
But when only the `body` slot is present, it will be treated as `default`.
</template>
</KCard>
</div>
</SandboxSectionComponent>

<!-- Legacy -->
<SandboxTitleComponent
is-subtitle
title="Legacy"
/>
<SandboxSectionComponent title="body slot (deprecated)">
<KCard>
When both `default` and `body` slots are present, `default` slot will be used.
<template #body>
And `body` slot will be ignored.
</template>
</KCard>
<KCard>
<template #body>
But when only the `body` slot is present, it will be treated as `default`.
</template>
</KCard>
</SandboxSectionComponent>
<SandboxSectionComponent title="body prop (deprecated)">
<KCard body="`body` prop is deprecated but is backwards compatible." />
</SandboxSectionComponent>
</div>
</SandboxSectionComponent>
<SandboxSectionComponent title="body prop (deprecated)">
<KCard body="`body` prop is deprecated but is backwards compatible." />
</SandboxSectionComponent>
</div>
</SandboxLayout>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
import { KExternalLink, KCard, KBadge, KDropdown, KButton } from '@/components'
import { MoreIcon, CheckIcon } from '@kong/icons'
import { KUI_COLOR_TEXT_SUCCESS, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
</script>
Expand Down
6 changes: 6 additions & 0 deletions sandbox/router/sandbox-routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ const componentRoutes: RouteRecordRaw[] = [
meta: { title: 'Button Sandbox' },
component: () => import('../pages/SandboxButton.vue'),
},
{
path: 'card',
name: 'card',
meta: { title: 'Card Sandbox' },
component: () => import('../pages/SandboxCard.vue'),
},
{
path: '/catalog',
name: 'catalog',
Expand Down

0 comments on commit d050349

Please sign in to comment.