Skip to content

Commit bb22ea4

Browse files
c4rlosviteric4rlosviteri
authored
Merge pull request #201 from rei/pr/surface-navigation
2 parents a76911b + 1f4d067 commit bb22ea4

53 files changed

Lines changed: 2104 additions & 2171 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/examples.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import skeleton from 'componentsdir/skeleton/examples/Skeleton.vue';
3434
import splitSurface from 'componentsdir/splitSurface/examples/SplitSurface.vue';
3535
import surface from 'componentsdir/surface/examples/Surface.vue';
3636
import surfaceSelection from 'componentsdir/surfaceSelection/examples/SurfaceSelection.vue';
37+
import surfaceNavigation from 'componentsdir/surfaceNavigation/examples/SurfaceNavigation.vue';
3738
import tables from 'componentsdir/table/examples/Table.vue';
3839
import tabs from 'componentsdir/tabs/examples/Tabs.vue';
3940
import texts from 'componentsdir/text/examples/Text.vue';
@@ -81,6 +82,7 @@ export default {
8182
splitSurface,
8283
surface,
8384
surfaceSelection,
85+
surfaceNavigation,
8486
tables,
8587
tabs,
8688
texts,

‎src/components/fulfillmentTile/CdrFulfillmentTile.vue‎

Lines changed: 67 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,91 @@
11
<script setup lang="ts">
22
import { useCssModule, computed } from 'vue';
3-
import mapClasses from '../../utils/mapClasses';
4-
import { surfaceSelection } from '../../types/interfaces';
5-
import { getSurfaceSelectionProps, getDefaultLayout } from '../../utils/surface';
6-
import CdrLayout from '../layout/CdrLayout.vue';
7-
import CdrFulfillmentTileHeader from './CdrFulfillmentTileHeader.vue';
8-
import CdrFulfillmentTileContent from './CdrFulfillmentTileContent.vue';
9-
import CdrSkeleton from '../skeleton/CdrSkeleton.vue';
10-
import CdrSkeletonBone from '../skeleton/CdrSkeletonBone.vue';
11-
12-
/** Displays a composed selection option and provides feedback with optional icons */
3+
import CdrSurfaceSelection from '../surfaceSelection/CdrSurfaceSelection.vue';
4+
import CdrSubheadingSans from '../text/presets/CdrSubheadingSans.vue';
5+
import CdrBody from '../text/presets/CdrBody.vue';
6+
import type { surfaceSelection } from '../../types/interfaces';
7+
import { getSurfaceProps } from '../../utils/surface';
138
9+
/** Selection variant of CdrSurfaceSelection with additional interactive states */
1410
defineOptions({ name: 'CdrFulfillmentTile' });
1511
1612
const props = withDefaults(defineProps<surfaceSelection>(), {
17-
tag: 'button',
18-
role: 'radio',
19-
modifier: 'default',
20-
checked: false,
21-
disabled: false,
22-
loading: false,
23-
layout: () => getDefaultLayout({ flow: 'row' }),
13+
tag: 'div',
14+
role: 'checkbox',
15+
borderRadius: 'soft'
2416
});
2517
2618
const style = useCssModule();
27-
const baseClass = 'cdr-fulfillment-tile';
28-
29-
// Manages the props passed along to CdrSurface
30-
const rootProps = computed(() => {
31-
const { classes, ...additionalProps } = getSurfaceSelectionProps(props, baseClass);
32-
return { ...additionalProps, class: mapClasses(style, ...classes) || undefined };
33-
});
3419
35-
// Merge layout props
36-
const layoutProps = computed(() =>
37-
Object.assign(getDefaultLayout({ flow: 'row', rows: [1] }), props.layout),
38-
);
20+
// Compute surface props including selection-specific attributes
21+
const surfaceProps = computed(() => ({
22+
...getSurfaceProps(props),
23+
'aria-checked': props.checked,
24+
'aria-disabled': props.disabled,
25+
'data-loading': props.loading,
26+
}));
3927
</script>
4028

4129
<template>
42-
<component
43-
:is="tag"
44-
v-bind="rootProps"
30+
<CdrSurfaceSelection
31+
v-bind="surfaceProps"
32+
:class="style['cdr-fulfillment-tile']"
33+
:tag="props.tag"
34+
:role="props.role"
4535
>
46-
<CdrLayout
47-
:rows="['auto', 1]"
48-
:class="style['cdr-fulfillment-tile__inner']"
49-
>
50-
<CdrFulfillmentTileHeader>
51-
<template
36+
<div :class="style['cdr-fulfillment-tile__content']">
37+
<div
38+
v-if="$slots.header"
39+
:class="style['cdr-fulfillment-tile__header']"
40+
>
41+
<span
5242
v-if="$slots['icon-left']"
53-
#icon-left
43+
:class="style['cdr-fulfillment-tile-header__icon']"
5444
>
55-
<!-- @slot Place an icon to the left of the header content -->
45+
<!-- @slot Icon to display on the left of the header. -->
5646
<slot name="icon-left" />
57-
</template>
58-
<template #header>
59-
<!-- @slot Header content that is still visible during loading. -->
60-
<slot name="header" />
61-
</template>
62-
<template
47+
</span>
48+
<div v-if="$slots.header">
49+
<CdrSubheadingSans
50+
:strong="true"
51+
scale="-1"
52+
tag="span"
53+
>
54+
<!-- @slot Header content that is still visible during loading. -->
55+
<slot name="header" />
56+
</CdrSubheadingSans>
57+
</div>
58+
<span
6359
v-if="$slots['icon-right']"
64-
#icon-right
60+
:class="style['cdr-fulfillment-tile-header__icon']"
6561
>
66-
<!-- @slot Place an icon to the right of the header content -->
62+
<!-- @slot Icon to display on the right of the header. -->
6763
<slot name="icon-right" />
68-
</template>
69-
</CdrFulfillmentTileHeader>
70-
<div :class="style['cdr-fulfillment-tile__main']">
71-
<CdrLayout
72-
v-bind="layoutProps"
73-
:class="style['cdr-fulfillment-tile__layout']"
64+
</span>
65+
</div>
66+
<div
67+
:class="style['cdr-fulfillment-tile__main']"
68+
v-if="$slots['body'] || $slots['footer']"
69+
>
70+
<CdrBody
71+
tag="div"
72+
scale="-2"
73+
v-if="$slots['body']"
7474
>
75-
<CdrFulfillmentTileContent>
76-
<!-- @slot Default font size is a step down. Placed just below the header. -->
77-
<slot name="body" />
78-
</CdrFulfillmentTileContent>
79-
<template v-if="$slots['footer']">
80-
<CdrFulfillmentTileContent scale="-1">
81-
<!-- @slot Footer content will be at the bottom of the component. -->
82-
<slot name="footer" />
83-
</CdrFulfillmentTileContent>
84-
</template>
85-
</CdrLayout>
86-
<div :class="style['cdr-fulfillment-tile__loading']">
87-
<!-- @slot Custom content when component is loading. -->
88-
<slot name="loading">
89-
<CdrSkeleton>
90-
<CdrSkeletonBone type="line" />
91-
</CdrSkeleton>
92-
</slot>
93-
</div>
75+
<!-- @slot Default font size is a step down. Placed just below the header. -->
76+
<slot name="body" />
77+
</CdrBody>
78+
<CdrBody
79+
tag="div"
80+
scale="-1"
81+
v-if="$slots['footer']"
82+
>
83+
<!-- @slot Footer content will be at the bottom of the component. -->
84+
<slot name="footer" />
85+
</CdrBody>
9486
</div>
95-
</CdrLayout>
96-
</component>
87+
</div>
88+
</CdrSurfaceSelection>
9789
</template>
9890

99-
<style lang="scss" module src="./styles/CdrFulfillmentTile.module.scss"></style>
91+
<style lang="scss" module src="./styles/CdrFulfillmentTitle.module.scss" />

‎src/components/fulfillmentTile/CdrFulfillmentTileContent.vue‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎src/components/fulfillmentTile/CdrFulfillmentTileHeader.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)