Implement radio card

docs/.vitepress/config.ts

@@ -16,7 +16,10 @@ export default defineConfig({
 			    { text: "Button", link: "/components/button/" },
 			    { text: "Pill", link: "/components/pill/" },
 			    { text: "Loader", link: "/components/loader/" },
-			    { text: "Card", link: "/components/card/" },
+			    { text: "Card", items: [
+            { text: "Basic Card", link: "/components/card/basic" },
+            { text: "Radio Card", link: "/components/card/radio" },
+          ] },
         ]
       }
 		]

docs/.vitepress/theme/index.ts

+import { createI18n } from 'vue-i18n'
+import Funkwhale from '~/main'
+
+import DefaultTheme from 'vitepress/theme'
+import en from '~/locales/en.yaml'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      fallbackLocale: 'en',
+      messages: { en }
+    })
+
+    app.use(Funkwhale)
+    app.use(i18n)
+  }
+}

docs/components/button/index.md

 <script setup>
-import { FwButton } from '~/components'
-
 const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
 

docs/components/card/index.md → docs/components/card/basic.md

-
 <script setup lang="ts">
-import { FwCard } from '~/components'
-
 const alert = (message: string) => window.alert(message)
 </script>
 

docs/components/card/radio.md

+<script setup lang="ts">
+const radio = {
+  name: 'Less Listened',
+  description: 'First artist, Second Artist, One Other Artist, Yet Another One'
+}
+</script>
+
+# Radio card
+## Card colors
+### Blue
+This is the default color
+```html
+<fw-radio-card blue :radio="radio" />
+```
+<fw-radio-card blue :radio="radio" />
+
+### Red
+```html
+<fw-radio-card red :radio="radio" />
+```
+<fw-radio-card red :radio="radio" />
+
+### Purple
+```html
+<fw-radio-card purple :radio="radio" />
+```
+<fw-radio-card purple :radio="radio" />
+
+### Green
+```html
+<fw-radio-card green :radio="radio" />
+```
+<fw-radio-card green :radio="radio" />
+
+### Yellow
+```html
+<fw-radio-card yellow :radio="radio" />
+```
+<fw-radio-card yellow :radio="radio" />
+
+## Card sizes
+### Normal card
+```html
+<fw-radio-card :radio="radio" />
+```
+<fw-radio-card :radio="radio" />
+
+### Small card
+```html
+<fw-radio-card small :radio="radio" />
+```
+<fw-radio-card small :radio="radio" />

docs/components/loader/index.md

-<script setup>
-import { FwLoader } from '~/components'
-</script>
-
 <style>
 .docs-loader-container div[style^=width] {
   border: 1px solid #666;

docs/components/pill/index.md

-<script setup>
-import { FwPill } from '~/components'
-</script>
-
 # Pill
 ## Pill colors
 ### Primary pill

docs/vite.config.ts

 import { fileURLToPath, URL } from 'url'
 import { defineConfig } from 'vite'
+
 import viteConfig from '../vite.config'
+import yaml from '@modyfi/vite-plugin-yaml'
 
 export default defineConfig((config) => ({
   // @ts-expect-error UserConfigExport is not callable (only in theory)
   css: viteConfig(config).css,
+  plugins: [yaml()],
   publicDir: false,
   resolve: {
     alias: {

package.json

@@ -18,6 +18,7 @@
 		"vue": "^3.2.38"
 	},
 	"devDependencies": {
+		"@modyfi/vite-plugin-yaml": "^1.0.3",
 		"@vitejs/plugin-vue": "^3.0.3",
 		"@vitest/coverage-c8": "^0.22.1",
 		"@vue/test-utils": "^2.0.2",
@@ -29,6 +30,7 @@
 		"vite": "^3.0.9",
 		"vitepress": "^1.0.0-alpha.13",
 		"vitest": "^0.22.1",
+		"vue-i18n": "9",
 		"vue-tsc": "^0.40.6"
 	}
 }

src/components/button/Button.vue

 <script setup lang="ts">
-import { type TypeProps, useType } from '~/composables/useType'
+import { type ColorProps, useColor } from '~/composables/useColor'
 import { FwLoader } from '~/components'
 import { ref, computed, useSlots } from 'vue'
 
-interface Props extends TypeProps {
+interface Props extends ColorProps {
   outline?: boolean
 
   isActive?: boolean
@@ -22,7 +22,7 @@ interface Props extends TypeProps {
 
 const props = defineProps<Props>()
 
-const type = useType(props)
+const type = useColor(props)
 
 const slots = useSlots()
 const iconOnly = computed(() => !!props.icon && !slots.default)

src/components/card/radio/Card.vue

+<script setup lang="ts">
+import { type PastelProps, usePastel } from '~/composables/usePastels'
+import { FwCard } from '~/components'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+interface Radio {
+  name: string
+  description: string
+}
+
+interface Props extends PastelProps {
+  radio: Radio
+  small?: boolean
+
+  // TODO (wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
+  red?: boolean
+  blue?: boolean
+  purple?: boolean
+  green?: boolean
+  yellow?: boolean
+}
+
+const props = defineProps<Props>()
+
+const pastel = usePastel(props)
+</script>
+
+<template>
+  <fw-card
+    :title="radio.name"
+    :class="pastel"
+    class="radio-card"
+  >
+    <div class="radio-cover">
+      <div class="cover-name">{{ t('vui.radio') }}</div>
+    </div>
+    <div
+      v-if="!small"
+      class="radio-description"
+    >
+      {{ radio.description }}
+    </div>
+  </fw-card>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/card/radio/style.scss

+.funkwhale {
+  &.card.radio-card {
+    --fw-bg-color: var(--fw-pastel-3);
+    --fw-text-color: var(--fw-grey-100);
+
+    position: relative;
+    padding: 0;
+    width: 208px;
+    background: var(--fw-bg-color);
+
+    > .card-title {
+      position: absolute;
+      padding: 22px 16px 0;
+      width: 100%;
+      font-size: 2rem;
+    }
+
+    .radio-cover {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 1;
+      pointer-events: none;
+
+      > .cover-name {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+
+        font-size: 1.5rem;
+        font-weight: 300;
+        pointer-events: auto;
+      }
+    }
+
+    > .card-content {
+      padding-top: 0 !important;
+    }
+
+    .radio-description {
+      --fw-bg-color: var(--fw-pastel-1);
+      --fw-text-color: var(--fw-grey-900);
+
+      text-align: center;
+      font-size: 0.875rem;
+      padding: 16px 16px 22px;
+      background: var(--fw-bg-color);
+      color: var(--fw-text-color);
+    }
+  }
+}

src/components/card/style.scss

 .funkwhale {
   &.card {
+    overflow: hidden;
     border-radius: var(--fw-border-radius);
     color: var(--fw-text-color);
     width: 320px;

src/components/pill/Pill.vue

 <script setup lang="ts">
-import { type TypeProps, useType } from '~/composables/useType'
+import { type ColorProps, useColor } from '~/composables/useColor'
 
-interface Props extends TypeProps {
+interface Props extends ColorProps {
   // TODO (wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
   primary?: boolean
   secondary?: boolean
@@ -10,7 +10,7 @@ interface Props extends TypeProps {
 
 const props = defineProps<Props>()
 
-const type = useType(props, 'is-secondary')
+const type = useColor(props, 'is-secondary')
 </script>
 
 <template>

src/composables/useType.ts → src/composables/useColor.ts

 import { computed } from "vue"
 
-export interface TypeProps {
+export interface ColorProps {
   primary?: boolean
   secondary?: boolean
   destructive?: boolean
 }
 
-type Type = 'is-primary' | 'is-secondary' | 'is-destructive'
-export const useType = (props: TypeProps, defaultType: Type = 'is-primary') => computed<Type>(() => props.primary
+type Color = 'is-primary' | 'is-secondary' | 'is-destructive'
+export const useColor = (props: ColorProps, defaultColor: Color = 'is-primary') => computed<Color>(() => props.primary
   ? 'is-primary'
   : props.secondary
     ? 'is-secondary'
     : props.destructive
       ? 'is-destructive'
-      : defaultType
+      : defaultColor
 )

src/composables/usePastels.ts

+import { computed } from "vue"
+
+export interface PastelProps {
+  red?: boolean
+  blue?: boolean
+  purple?: boolean
+  green?: boolean
+  yellow?: boolean
+}
+
+type Color = 'is-red' | 'is-blue' | 'is-purple' | 'is-green' | 'is-yellow'
+export const usePastel = (props: PastelProps, defaultColor: Color = 'is-blue') => computed<Color>(() => props.blue
+  ? 'is-blue'
+  : props.red
+    ? 'is-red'
+    : props.purple
+      ? 'is-purple'
+      : props.green
+        ? 'is-green'
+        : props.yellow
+          ? 'is-yellow'
+          : defaultColor
+)

src/locales/en.yaml

+vui:
+  radio: Radio

src/main.ts

@@ -9,7 +9,7 @@ export default {
   install (app: App) {
     for (const prop in components) {
       const component = components[prop as keyof typeof components]
-      app.component(component.name, component)
+      app.component(prop, component)
     }
   }
 }

src/styles/colors.scss

@@ -28,6 +28,32 @@
   // Beige
   --fw-beige-100: #fafaf6;
 
+  // Pastels
+  --fw-pastel-blue-1: #afdde9;
+  --fw-pastel-blue-2: #87cdde;
+  --fw-pastel-blue-3: #5fbcd3;
+  --fw-pastel-blue-4: #37abc8;
+
+  --fw-pastel-red-1: #f4d7d7;
+  --fw-pastel-red-2: #e9afaf;
+  --fw-pastel-red-3: #de8787;
+  --fw-pastel-red-4: #d35f5f;
+
+  --fw-pastel-purple-1: #b37db1;
+  --fw-pastel-purple-2: #a0619b;
+  --fw-pastel-purple-3: #806b7e;
+  --fw-pastel-purple-4: #67535f;
+
+  --fw-pastel-green-1: #afcd7d;
+  --fw-pastel-green-2: #84a846;
+  --fw-pastel-green-3: #5aa546;
+  --fw-pastel-green-4: #5d944e;
+
+  --fw-pastel-yellow-1: #fdeb63;
+  --fw-pastel-yellow-2: #ffe32f;
+  --fw-pastel-yellow-3: #fed100;
+  --fw-pastel-yellow-4: #efa300;
+
   // Background
   --fw-bg-color: var(--fw-grey-100);
   --fw-text-color: var(--fw-blue-900);
@@ -119,3 +145,14 @@ html.dark {
     }
   }
 }
+
+.funkwhale {
+  @each $pastel in ("blue", "red", "green", "purple", "yellow") {
+    &.is-#{$pastel} {
+      --fw-pastel-1: var(--fw-pastel-#{$pastel}-1);
+      --fw-pastel-2: var(--fw-pastel-#{$pastel}-2);
+      --fw-pastel-3: var(--fw-pastel-#{$pastel}-3);
+      --fw-pastel-4: var(--fw-pastel-#{$pastel}-4);
+    }
+  }
+}

vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig(() => ({
 		  name: 'vui',
 		},
 		rollupOptions: {
-		  external: ['vue'],
+		  external: ['vue', 'vue-i18n'],
 		  output: {
         exports: 'named',
         globals: {