Skip to content

Commit f6b1146

Browse files
u12206050u12206050
committed
Support custom icons
1 parent 582fb9d commit f6b1146

3 files changed

Lines changed: 36 additions & 9 deletions

File tree

‎design-library/src/components/BccToggle/BccToggle.stories.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import BccToggle from "./BccToggle.vue";
2+
import { NotificationsFillIcon, NotificationsOffFillIcon } from "@bcc-code/icons-vue";
23

34
import type { Meta, StoryFn } from "@storybook/vue3";
45

@@ -101,3 +102,24 @@ export const Loading: StoryFn<typeof BccToggle> = () => ({
101102
</div>
102103
`,
103104
});
105+
106+
export const WithIcon: StoryFn<typeof BccToggle> = () => ({
107+
components: { BccToggle, NotificationsFillIcon, NotificationsOffFillIcon },
108+
setup() {
109+
return { NotificationsFillIcon, NotificationsOffFillIcon };
110+
},
111+
data() {
112+
return {
113+
value1: true,
114+
value2: false,
115+
};
116+
},
117+
template: `
118+
<div class="flex items-center space-x-2">
119+
<NotificationsFillIcon class="w-6 h-6" />
120+
<NotificationsOffFillIcon class="w-6 h-6" />
121+
<BccToggle v-model="value1" :icon="value1 ? NotificationsFillIcon : NotificationsOffFillIcon" />
122+
<BccToggle v-model="value2" :icon="value2 ? NotificationsFillIcon : NotificationsOffFillIcon" />
123+
</div>
124+
`,
125+
});

‎design-library/src/components/BccToggle/BccToggle.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ type Props = {
99
wasToggled?: boolean;
1010
disabled?: boolean;
1111
loading?: boolean;
12-
withIcon?: boolean | VueComponent;
12+
withIcon?: boolean;
13+
icon?: VueComponent;
1314
label?: string;
1415
};
1516
@@ -21,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
2122
label: "",
2223
});
2324
24-
const { modelValue, wasToggled, disabled, loading } = toRefs(props);
25+
const { modelValue } = toRefs(props);
2526
2627
const emit = defineEmits(["update:modelValue"]);
2728
@@ -45,11 +46,15 @@ const toggled = computed({
4546
/>
4647
<span class="bcc-toggle-circle" aria-hidden="true">
4748
<CircleLoader class="size-3" v-if="loading" />
48-
<template v-else-if="withIcon === true">
49-
<CheckIcon class="hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&]:block" />
50-
<CloseIcon class="size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&]:hidden" />
49+
<component v-else-if="icon" :is="icon" class="bcc-toggle-icon size-3" />
50+
<template v-else-if="withIcon">
51+
<CheckIcon
52+
class="bcc-toggle-icon hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&]:block"
53+
/>
54+
<CloseIcon
55+
class="bcc-toggle-icon size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&]:hidden"
56+
/>
5157
</template>
52-
<component v-else-if="withIcon" :is="withIcon" class="bcc-toggle-icon size-3" />
5358
</span>
5459
<span v-if="label" class="bcc-toggle-label">{{ label }}</span>
5560
</label>

‎design-library/src/components/BccToggle/__snapshots__/BccToggle.spec.ts.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`BccToggle > renders a label 1`] = `"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span><span class="bcc-toggle-label">Test label</span></label>"`;
3+
exports[`BccToggle > renders a label 1`] = `"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span><span class="bcc-toggle-label">Test label</span></label>"`;
44
55
exports[`BccToggle > renders a toggle in on or off state 1`] = `
6-
"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span>
6+
"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span>
77
<!--v-if-->
88
</label>"
99
`;
1010
1111
exports[`BccToggle > renders a toggle in on or off state 2`] = `
12-
"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span>
12+
"<label class="bcc-toggle"><input type="checkbox" class="bcc-toggle-input"><span class="bcc-toggle-circle" aria-hidden="true"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon hidden size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:block"><path d="m382-354 339-339q12-12 28.5-12t28.5 12q12 12 12 28.5T778-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"></path></svg><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="bcc-toggle-icon size-3 [.bcc-toggle-input:checked~.bcc-toggle-circle>&amp;]:hidden"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"></path></svg></span>
1313
<!--v-if-->
1414
</label>"
1515
`;

0 commit comments

Comments
 (0)