Skip to content

Commit f4f127b

Browse files
cviterireicviterirei
committed
Add simple surface scroll example
1 parent 83cbfe6 commit f4f127b

4 files changed

Lines changed: 128 additions & 1 deletion

File tree

‎src/components/examples.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import skeleton from 'componentsdir/skeleton/examples/Skeleton.vue';
3636
import splitSurface from 'componentsdir/splitSurface/examples/SplitSurface.vue';
3737
import surface from 'componentsdir/surface/examples/Surface.vue';
3838
import surfaceSelection from 'componentsdir/surfaceSelection/examples/SurfaceSelection.vue';
39+
import surfaceScroll from 'componentsdir/surfaceScroll/examples/SurfaceScroll.vue';
3940
import surfaceNavigation from 'componentsdir/surfaceNavigation/examples/SurfaceNavigation.vue';
4041
import tables from 'componentsdir/table/examples/Table.vue';
4142
import tabs from 'componentsdir/tabs/examples/Tabs.vue';
@@ -86,6 +87,7 @@ export default {
8687
splitSurface,
8788
surface,
8889
surfaceSelection,
90+
surfaceScroll,
8991
surfaceNavigation,
9092
tables,
9193
tabs,

src/components/surfaceScroll/tests/CdrSurfaceScroll.spec.ts renamed to src/components/surfaceScroll/__tests__/CdrSurfaceScroll.spec.ts

File renamed without changes.

‎src/components/surfaceScroll/examples/SurfaceScroll.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<script setup lang="ts">
2+
import CdrSurfaceScroll from '../CdrSurfaceScroll.vue';
3+
import CdrSurface from '../../surface/CdrSurface.vue';
4+
import CdrText from '../../text/CdrText.vue';
5+
import CdrTitle from '../../title/CdrTitle.vue';
6+
7+
defineOptions({ name: 'SurfaceScrollExample' });
8+
9+
const loremTexts = [
10+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
11+
'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
12+
'Ut enim ad minim veniam, quis nostrud exercitation ullamco.',
13+
'Duis aute irure dolor in reprehenderit in voluptate velit esse.',
14+
'Excepteur sint occaecat cupidatat non proident, sunt in culpa.',
15+
'Qui officia deserunt mollit anim id est laborum.',
16+
'At vero eos et accusamus et iusto odio dignissimos ducimus.',
17+
'Et harum quidem rerum facilis est et expedita distinctio.',
18+
'Nam libero tempore, cum soluta nobis est eligendi optio.',
19+
'Temporibus autem quibusdam et aut officiis debitis aut rerum.',
20+
];
21+
22+
interface Frame {
23+
key: string;
24+
props: {
25+
title: string;
26+
content: string;
27+
index: number;
28+
};
29+
}
30+
31+
// Create frames for the surface scroll
32+
const frames: Frame[] = loremTexts.map((text, index) => ({
33+
key: `card-${index}`,
34+
props: {
35+
title: `Card ${index + 1}`,
36+
content: text,
37+
index,
38+
},
39+
}));
40+
</script>
41+
42+
<template>
43+
<div class="surface-scroll-example">
44+
<h2>Surface Scroll Example</h2>
45+
<p>A simple horizontal scrolling example with Lorem Ipsum cards.</p>
46+
47+
<CdrSurfaceScroll
48+
id="surface-scroll-demo"
49+
description="Horizontal scrolling cards with Lorem Ipsum content"
50+
:frames="frames"
51+
:frames-gap="16"
52+
:is-showing-arrows="true"
53+
class="surface-scroll-example__scroll"
54+
>
55+
<template #frame="{ title, content }: Record<string, unknown>">
56+
<article class="surface-scroll-example__card">
57+
<CdrSurface
58+
border-radius="soft"
59+
background="secondary"
60+
class="surface-scroll-example__surface"
61+
>
62+
<CdrTitle tag="h3" class="surface-scroll-example__title">
63+
{{ title }}
64+
</CdrTitle>
65+
66+
<CdrText class="surface-scroll-example__content">
67+
{{ content }}
68+
</CdrText>
69+
</CdrSurface>
70+
</article>
71+
</template>
72+
</CdrSurfaceScroll>
73+
</div>
74+
</template>
75+
76+
<style lang="scss" scoped>
77+
@use '@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss' as *;
78+
79+
.surface-scroll-example {
80+
padding: $cdr-space-two-x;
81+
82+
h2 {
83+
margin-bottom: $cdr-space-one-x;
84+
}
85+
86+
p {
87+
margin-bottom: $cdr-space-two-x;
88+
color: $cdr-color-text-secondary;
89+
}
90+
91+
&__scroll {
92+
width: 100%;
93+
}
94+
95+
&__card {
96+
width: 100%;
97+
height: 200px;
98+
outline: none;
99+
100+
&:focus-visible {
101+
outline: 2px solid $cdr-color-border-secondary;
102+
outline-offset: 2px;
103+
}
104+
}
105+
106+
&__surface {
107+
width: 100%;
108+
height: 100%;
109+
padding: $cdr-space-one-and-a-half-x;
110+
display: flex;
111+
flex-direction: column;
112+
gap: $cdr-space-one-x;
113+
}
114+
115+
&__title {
116+
margin: 0;
117+
}
118+
119+
&__content {
120+
margin: 0;
121+
flex: 1;
122+
}
123+
}
124+
</style>

‎src/dev/router.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const routes = [
3030
{ path: '/chips', name: 'Chip', component: Examples.chip },
3131
{ path: '/choreographer', name: 'Choreographer', component: Examples.choreographer },
3232
{ path: '/containers', name: 'Container', component: Examples.container },
33+
{ path: '/filmstrip', name: 'Filmstrip', component: Examples.filmstrip },
3334
{ path: '/formGroups', name: 'Form Groups', component: Examples.formGroup },
3435
{ path: '/fulfillmentTile', name: 'FulfillmentTile', component: Examples.fulfillmentTile },
3536
{ path: '/grid', name: 'Grid', component: Examples.grid },
@@ -56,6 +57,7 @@ const routes = [
5657
{ path: '/split-surface', name: 'Split Surface', component: Examples.splitSurface },
5758
{ path: '/surface', name: 'Surface', component: Examples.surface },
5859
{ path: '/surfaceSelection', name: 'SurfaceSelection', component: Examples.surfaceSelection },
60+
{ path: '/surfaceScroll', name: 'SurfaceScroll', component: Examples.surfaceScroll },
5961
{ path: '/surfaceNavigation', name: 'SurfaceNavigation', component: Examples.surfaceNavigation },
6062
{ path: '/tables', name: 'Tables', component: Examples.tables },
6163
{ path: '/tabs', name: 'Tabs', component: Examples.tabs },
@@ -66,7 +68,6 @@ const routes = [
6668
{ path: '/switch', name: 'Switch', component: Examples.cdrSwitch },
6769
{ path: '/tooltip', name: 'Tooltip', component: Examples.tooltip },
6870
{ path: '/utility', name: 'Utility', component: Examples.utility },
69-
{ path: '/filmstrip', name: 'Filmstrip', component: Examples.filmstrip },
7071
];
7172

7273
export default routes;

0 commit comments

Comments
 (0)