Skip to content

Commit 0851eb8

Browse files
author
mdatelle
committed
refactor: move brand components and create stories, test badge, and use unraid-ui styles in UpdateOS web component
1 parent edc991c commit 0851eb8

24 files changed

+924
-205
lines changed

‎unraid-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,6 @@
7474
"import": "./dist/index.js",
7575
"types": "./dist/index.d.ts"
7676
},
77-
"./style.css": "./dist/style.css"
77+
"./styles": "./src/styles/index.css"
7878
}
7979
}

‎unraid-ui/src/components/brand/BrandButton.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue';
3+
import { brandButtonVariants } from './brand-button.variants';
4+
import { cn } from '@/lib/utils';
5+
6+
export interface BrandButtonProps {
7+
variant?: 'fill' | 'black' | 'gray' | 'outline' | 'outline-black' | 'outline-white' | 'underline' | 'underline-hover-red' | 'white' | 'none';
8+
size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
9+
padding?: 'default' | 'none';
10+
btnType?: 'button' | 'submit' | 'reset';
11+
class?: string;
12+
click?: () => void;
13+
disabled?: boolean;
14+
external?: boolean;
15+
href?: string;
16+
icon?: any;
17+
iconRight?: any;
18+
iconRightHoverDisplay?: boolean;
19+
text?: string;
20+
title?: string;
21+
}
22+
23+
const props = withDefaults(defineProps<BrandButtonProps>(), {
24+
variant: 'fill',
25+
size: '16px',
26+
padding: 'default',
27+
btnType: 'button',
28+
class: undefined,
29+
click: undefined,
30+
disabled: false,
31+
external: false,
32+
href: undefined,
33+
icon: undefined,
34+
iconRight: undefined,
35+
iconRightHoverDisplay: false,
36+
text: '',
37+
title: '',
38+
});
39+
40+
defineEmits(['click']);
41+
42+
const classes = computed(() => {
43+
const iconSize = `w-${props.size}`;
44+
45+
return {
46+
button: cn(brandButtonVariants({ variant: props.variant, size: props.size, padding: props.padding }), props.class),
47+
icon: `${iconSize} fill-current flex-shrink-0`,
48+
};
49+
});
50+
</script>
51+
52+
<template>
53+
<component
54+
:is="href ? 'a' : 'button'"
55+
:disabled="disabled"
56+
:href="href"
57+
:rel="external ? 'noopener noreferrer' : ''"
58+
:target="external ? '_blank' : ''"
59+
:type="!href ? btnType : ''"
60+
:class="classes.button"
61+
:title="title"
62+
@click="click ?? $emit('click')"
63+
>
64+
<div
65+
v-if="variant === 'fill'"
66+
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60"
67+
/>
68+
<div
69+
v-if="variant === 'outline'"
70+
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
71+
/>
72+
73+
<component
74+
:is="icon"
75+
v-if="icon"
76+
:class="classes.icon"
77+
/>
78+
79+
{{ text }}
80+
<slot />
81+
82+
<component
83+
:is="iconRight"
84+
v-if="iconRight"
85+
:class="[
86+
classes.icon,
87+
iconRightHoverDisplay && 'opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-all',
88+
]"
89+
/>
90+
</component>
91+
</template>

‎unraid-ui/src/components/brand/BrandLoading.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script setup lang="ts">
2+
export interface Props {
3+
gradientStart?: string;
4+
gradientStop?: string;
5+
title?: string,
6+
}
7+
8+
withDefaults(defineProps<Props>(), {
9+
gradientStart: '#e32929',
10+
gradientStop: '#ff8d30',
11+
title: 'Loading',
12+
});
13+
</script>
14+
15+
<template>
16+
<svg
17+
xmlns="http://www.w3.org/2000/svg"
18+
xmlns:xlink="http://www.w3.org/1999/xlink"
19+
viewBox="0 0 133.52 76.97"
20+
:class="`unraid_mark`"
21+
role="img"
22+
>
23+
<title>{{ title }}</title>
24+
<desc>Unraid logo animating with a wave like effect</desc>
25+
<defs>
26+
<linearGradient
27+
id="unraidLoadingGradient"
28+
x1="23.76"
29+
y1="81.49"
30+
x2="109.76"
31+
y2="-4.51"
32+
gradientUnits="userSpaceOnUse"
33+
>
34+
<stop offset="0" :stop-color="gradientStart" />
35+
<stop offset="1" :stop-color="gradientStop" />
36+
</linearGradient>
37+
</defs>
38+
<path
39+
d="m70,19.24zm57,0l6.54,0l0,38.49l-6.54,0l0,-38.49z"
40+
fill="url(#unraidLoadingGradient)"
41+
class="unraid_mark_9"
42+
/>
43+
<path
44+
d="m70,19.24zm47.65,11.9l-6.55,0l0,-23.79l6.55,0l0,23.79z"
45+
fill="url(#unraidLoadingGradient)"
46+
class="unraid_mark_8"
47+
/>
48+
<path
49+
d="m70,19.24zm31.77,-4.54l-6.54,0l0,-14.7l6.54,0l0,14.7z"
50+
fill="url(#unraidLoadingGradient)"
51+
class="unraid_mark_7"
52+
/>
53+
<path
54+
d="m70,19.24zm15.9,11.9l-6.54,0l0,-23.79l6.54,0l0,23.79z"
55+
fill="url(#unraidLoadingGradient)"
56+
class="unraid_mark_6"
57+
/>
58+
<path
59+
d="m63.49,19.24l6.51,0l0,38.49l-6.51,0l0,-38.49z"
60+
fill="url(#unraidLoadingGradient)"
61+
class="unraid_mark_5"
62+
/>
63+
<path
64+
d="m70,19.24zm-22.38,26.6l6.54,0l0,23.78l-6.54,0l0,-23.78z"
65+
fill="url(#unraidLoadingGradient)"
66+
class="unraid_mark_4"
67+
/>
68+
<path
69+
d="m70,19.24zm-38.26,43.03l6.55,0l0,14.73l-6.55,0l0,-14.73z"
70+
fill="url(#unraidLoadingGradient)"
71+
class="unraid_mark_3"
72+
/>
73+
<path
74+
d="m70,19.24zm-54.13,26.6l6.54,0l0,23.78l-6.54,0l0,-23.78z"
75+
fill="url(#unraidLoadingGradient)"
76+
class="unraid_mark_2"
77+
/>
78+
<path
79+
d="m70,19.24zm-63.46,38.49l-6.54,0l0,-38.49l6.54,0l0,38.49z"
80+
fill="url(#unraidLoadingGradient)"
81+
class="unraid_mark_1"
82+
/>
83+
</svg>
84+
</template>
85+
86+
<style lang="postcss">
87+
.unraid_mark_2,
88+
.unraid_mark_4 {
89+
animation: mark_2 1.5s ease infinite;
90+
}
91+
.unraid_mark_3 {
92+
animation: mark_3 1.5s ease infinite;
93+
}
94+
.unraid_mark_6,
95+
.unraid_mark_8 {
96+
animation: mark_6 1.5s ease infinite;
97+
}
98+
.unraid_mark_7 {
99+
animation: mark_7 1.5s ease infinite;
100+
}
101+
102+
@keyframes mark_2 {
103+
50% {
104+
transform: translateY(-40px);
105+
}
106+
100% {
107+
transform: translateY(0);
108+
}
109+
}
110+
@keyframes mark_3 {
111+
50% {
112+
transform: translateY(-62px);
113+
}
114+
100% {
115+
transform: translateY(0);
116+
}
117+
}
118+
@keyframes mark_6 {
119+
50% {
120+
transform: translateY(40px);
121+
}
122+
100% {
123+
transform: translateY(0);
124+
}
125+
}
126+
@keyframes mark_7 {
127+
50% {
128+
transform: translateY(62px);
129+
}
130+
100% {
131+
transform: translateY(0);
132+
}
133+
}
134+
</style>

‎unraid-ui/src/components/brand/BrandLoadingWhite.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
import BrandLoading from './BrandLoading.vue';
3+
</script>
4+
5+
<template>
6+
<BrandLoading gradient-start="#ffffff" gradient-stop="#ffffff" />
7+
</template>

‎unraid-ui/src/components/brand/BrandLogo.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
export interface Props {
3+
gradientStart?: string;
4+
gradientStop?: string;
5+
}
6+
7+
withDefaults(defineProps<Props>(), {
8+
gradientStart: '#e32929',
9+
gradientStop: '#ff8d30',
10+
});
11+
</script>
12+
13+
<template>
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
xmlns:xlink="http://www.w3.org/1999/xlink"
17+
viewBox="0 0 222.36 39.04"
18+
>
19+
<defs>
20+
<linearGradient
21+
id="unraidLogo"
22+
x1="47.53"
23+
y1="79.1"
24+
x2="170.71"
25+
y2="-44.08"
26+
gradientUnits="userSpaceOnUse"
27+
>
28+
<stop offset="0" :stop-color="gradientStart" />
29+
<stop offset="1" :stop-color="gradientStop" />
30+
</linearGradient>
31+
</defs>
32+
<title>Unraid Logo</title>
33+
<path
34+
d="M146.7,29.47H135l-3,9h-6.49L138.93,0h8l13.41,38.49h-7.09L142.62,6.93l-5.83,16.88h8ZM29.69,0V25.4c0,8.91-5.77,13.64-14.9,13.64S0,34.31,0,25.4V0H6.54V25.4c0,5.17,3.19,7.92,8.25,7.92s8.36-2.75,8.36-7.92V0ZM50.86,12v26.5H44.31V0h6.11l17,26.5V0H74V38.49H67.9ZM171.29,0h6.54V38.49h-6.54Zm51.07,24.69c0,9-5.88,13.8-15.17,13.8H192.67V0H207.3c9.18,0,15.06,4.78,15.06,13.8ZM215.82,13.8c0-5.28-3.3-8.14-8.52-8.14h-8.08V32.77h8c5.33,0,8.63-2.8,8.63-8.08ZM108.31,23.92c4.34-1.6,6.93-5.28,6.93-11.55C115.24,3.68,110.18,0,102.48,0H88.84V38.49h6.55V5.66h6.87c3.8,0,6.21,1.82,6.21,6.71s-2.41,6.76-6.21,6.76H98.88l9.21,19.36h7.53Z"
35+
fill="url(#unraidLogo)"
36+
/>
37+
</svg>
38+
</template>

‎unraid-ui/src/components/brand/BrandLogoConnect.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup lang="ts">
2+
export interface Props {
3+
gradientStart?: string;
4+
gradientStop?: string;
5+
}
6+
7+
withDefaults(defineProps<Props>(), {
8+
gradientStart: '#e32929',
9+
gradientStop: '#ff8d30',
10+
});
11+
</script>
12+
13+
<template>
14+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" viewBox="0 0 954.29 142.4">
15+
<defs>
16+
<linearGradient
17+
id="a"
18+
x1="-57.82"
19+
x2="923.39"
20+
y1="71.2"
21+
y2="71.2"
22+
gradientUnits="userSpaceOnUse"
23+
>
24+
<stop offset="0" :stop-color="gradientStart" />
25+
<stop offset="1" :stop-color="gradientStop" />
26+
</linearGradient>
27+
<linearGradient id="b" xlink:href="#a" x2="923.39" />
28+
<linearGradient id="c" xlink:href="#a" x2="923.39" y1="71.2" y2="71.2" />
29+
<linearGradient id="d" xlink:href="#a" x2="923.39" y1="71.2" y2="71.2" />
30+
<linearGradient id="e" xlink:href="#a" x2="923.39" y1="71.2" y2="71.2" />
31+
<linearGradient id="f" xlink:href="#a" x2="923.39" />
32+
<linearGradient id="g" xlink:href="#a" y1="12.16" y2="12.16" />
33+
<linearGradient id="h" xlink:href="#a" x2="923.39" y1="86.94" y2="86.94" />
34+
</defs>
35+
<path fill="url(#a)" d="M54.39 0C20.96 0 0 17.4 0 49.84v42.52c0 32.63 20.96 50.04 53.99 50.04s53.8-16.81 53.8-48.06v-.99H84.25v.99c0 17.8-11.47 27.49-30.26 27.49s-30.46-10.28-30.46-29.47V49.84c0-18.99 11.67-29.47 30.85-29.47s29.86 9.89 29.86 27.69v.79h23.54v-.79C107.79 16.81 87.02 0 54.39 0Z" />
36+
<path fill="url(#b)" d="M197.58 0c-33.42 0-54.59 17.4-54.59 49.84v42.52c0 32.63 21.16 50.04 54.19 50.04s54.59-17.4 54.59-50.04V49.84C251.77 17.4 230.61 0 197.58 0Zm30.66 92.36c0 19.18-11.87 29.47-31.05 29.47s-30.66-10.28-30.66-29.47V49.84c0-18.99 11.87-29.47 31.05-29.47s30.66 10.48 30.66 29.47v42.52Z" />
37+
<path fill="url(#c)" d="M373.8 97.31 312.49 1.98h-21.95v138.44h23.53V45.09l61.32 95.33h21.95V1.98H373.8v95.33z" />
38+
<path fill="url(#d)" d="M521.35 97.31 460.04 1.98h-21.96v138.44h23.54V45.09l61.31 95.33h21.95V1.98h-23.53v95.33z" />
39+
<path fill="url(#e)" d="M585.63 140.42h92.95v-20.57h-69.42V81.29h59.54V60.92h-59.54V22.35h69.42V1.98h-92.95v138.44z" />
40+
<path fill="url(#f)" d="M766.8 0c-33.43 0-54.39 17.4-54.39 49.84v42.52c0 32.63 20.96 50.04 53.99 50.04s53.8-16.81 53.8-48.06v-.99h-23.54v.99c0 17.8-11.47 27.49-30.26 27.49s-30.46-10.28-30.46-29.47V49.84c0-18.99 11.67-29.47 30.85-29.47s29.86 9.89 29.86 27.69v.79h23.54v-.79c0-31.25-20.77-48.06-53.4-48.06Z" />
41+
<path fill="url(#g)" d="M846.11 1.98h108.18v20.37H846.11z" />
42+
<path fill="url(#h)" d="M888.43 33.45h23.54v106.97h-23.54z" />
43+
</svg>
44+
</template>

‎unraid-ui/src/components/brand/brand-button.variants.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { cva } from "class-variance-authority";
2+
3+
export const brandButtonVariants = cva(
4+
"group text-center font-semibold leading-none relative z-0 flex flex-row items-center justify-center border-2 border-solid shadow-none cursor-pointer rounded-md hover:shadow-md focus:shadow-md disabled:opacity-25 disabled:hover:opacity-25 disabled:focus:opacity-25 disabled:cursor-not-allowed",
5+
{
6+
variants: {
7+
variant: {
8+
fill: "[&]:text-white bg-transparent border-transparent",
9+
black: "[&]:text-white bg-black border-black transition hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey",
10+
gray: "text-black bg-grey transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:border-grey-mid focus:border-grey-mid",
11+
outline: "[&]:text-orange bg-transparent border-orange hover:text-white focus:text-white",
12+
"outline-black": "text-black bg-transparent border-black hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey",
13+
"outline-white": "text-white bg-transparent border-white hover:text-black focus:text-black hover:bg-white focus:bg-white",
14+
underline: "opacity-75 underline border-transparent transition hover:text-primary hover:bg-muted hover:border-muted focus:text-primary focus:bg-muted focus:border-muted hover:opacity-100 focus:opacity-100",
15+
"underline-hover-red": "opacity-75 underline border-transparent transition hover:text-white hover:bg-unraid-red hover:border-unraid-red focus:text-white focus:bg-unraid-red focus:border-unraid-red hover:opacity-100 focus:opacity-100",
16+
white: "text-black bg-white transition hover:bg-grey focus:bg-grey",
17+
none: "",
18+
},
19+
size: {
20+
"12px": "text-12px gap-4px",
21+
"14px": "text-14px gap-8px",
22+
"16px": "text-16px gap-8px",
23+
"18px": "text-18px gap-8px",
24+
"20px": "text-20px gap-8px",
25+
"24px": "text-24px gap-8px",
26+
},
27+
padding: {
28+
default: "",
29+
none: "p-0",
30+
},
31+
},
32+
compoundVariants: [
33+
{
34+
size: "12px",
35+
padding: "default",
36+
class: "p-8px",
37+
},
38+
{
39+
size: "14px",
40+
padding: "default",
41+
class: "p-8px",
42+
},
43+
{
44+
size: "16px",
45+
padding: "default",
46+
class: "p-12px",
47+
},
48+
{
49+
size: "18px",
50+
padding: "default",
51+
class: "p-12px",
52+
},
53+
{
54+
size: "20px",
55+
padding: "default",
56+
class: "p-16px",
57+
},
58+
{
59+
size: "24px",
60+
padding: "default",
61+
class: "p-16px",
62+
},
63+
],
64+
defaultVariants: {
65+
variant: "fill",
66+
size: "16px",
67+
padding: "default",
68+
},
69+
}
70+
);

0 commit comments

Comments
 (0)