Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Add uno styling for the alert component #6

Merged
merged 9 commits into from
Apr 4, 2023
Merged

fix: Add uno styling for the alert component #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ae01c4d
wip: add new css and uno classes to alert component
magnuh Mar 31, 2023
ca97856
docs: Add contributing information and update readme (#5)
magnuh Mar 31, 2023
6c4eec3
wip: move class lists to vue file to get unocss to work
magnuh Mar 31, 2023
308e9ae
refactor: use component-classes
BalbinaK Apr 4, 2023
7262d24
wip: Fix reactivity issue with wrapper and icon classes
magnuh Apr 4, 2023
ca1da68
refactor: cleaning up
magnuh Apr 4, 2023
a3ad5c5
test: fixed broken alert test
magnuh Apr 4, 2023
dcfccda
chore: dismiss success comment after release
AnnaRybkina Mar 31, 2023
3e5e969
Merge branch 'alpha' of https://github.com/warp-ds/vue into unofy-the…
magnuh Apr 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions components/alert/logic.js
View file
Open in desktop

This file was deleted.

81 changes: 48 additions & 33 deletions components/alert/w-alert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
<template>
<div class="f-expandable">
<w-expand-transition>
<div v-if="model" role="alert">
<div :class="wrapperClass" :style="wrapperStyle" v-if="model" data-test="wrapper" :role="role">
<div class="flex">
<div class="w-16 mr-8" style="min-width: 16px;">
<svg v-if="negative" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17"> <path fill="#D91F0A" d="M4.1 1.6A2 2 0 0 1 5.5 1h5c.5 0 1 .2 1.4.6L15.4 5c.4.4.6.9.6 1.4v5c0 .5-.2 1-.6 1.4L12 16.4a2 2 0 0 1-1.4.6h-5a2 2 0 0 1-1.4-.6L.6 13a2 2 0 0 1-.6-1.4v-5c0-.5.2-1 .6-1.4L4 1.6Z"/> <path fill="#fff" fill-rule="evenodd" d="M8 4.3c.4 0 .8.3.8.7v5a.8.8 0 0 1-1.6 0V5c0-.4.4-.8.8-.8Z" clip-rule="evenodd"/> <path fill="#fff" d="M8.8 12.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z"/> </svg>
<svg v-else-if="positive" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17"> <g clip-path="url(#a)"> <circle cx="8" cy="9" r="8" fill="#059E6F" transform="rotate(180 8 9)"/> <path fill="#fff" fill-rule="evenodd" d="M11.5 6c.3.2.3.7 0 1l-4 4.5a.8.8 0 0 1-1 0l-2-2a.8.8 0 0 1 1-1L7 9.9 10.4 6c.3-.3.8-.3 1.1 0Z" clip-rule="evenodd"/> </g> <defs> <clipPath id="a"> <path fill="#fff" d="M0 0h16v16H0z" transform="translate(0 1)"/> </clipPath> </defs> </svg>
<svg v-else-if="warning" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17"> <path fill="#D5840B" d="m.2 13 6-11a2.1 2.1 0 0 1 3.6 0l6 11a2 2 0 0 1-1.9 3H2.1a2 2 0 0 1-1.9-3Z"/> <path fill="#fff" fill-rule="evenodd" d="M8 4.3c.4 0 .8.3.8.7v5a.8.8 0 0 1-1.6 0V5c0-.4.4-.8.8-.8Z" clip-rule="evenodd"/> <path fill="#fff" d="M8.8 12.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z"/> </svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17">
<!-- nb: logic controlling fill -->
<circle cx="8" cy="9" r="8" :fill="fillVar"/>
<path fill="#fff" fill-rule="evenodd" d="M7.3 13a.8.8 0 0 0 1.5 0V9a.8.8 0 0 0-1.6 0v4ZM8 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" clip-rule="evenodd"/>
</svg>
</div>
<div class="last-child:mb-0 text-14" data-test="content">
<p class="font-bold" v-if="title">{{ title }}</p>
<slot />
</div>
<div v-if="model" :role="role">
<div :class="wrapperClass" data-test="wrapper">
<div :class="iconClass">
<svg v-if="negative" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
<path d="M4.1.586A2 2 0 0 1 5.516 0h4.97A2 2 0 0 1 11.9.586L15.413 4.1A2 2 0 0 1 16 5.514v4.97a2 2 0 0 1-.586 1.415L11.9 15.413a2 2 0 0 1-1.415.586h-4.97a2 2 0 0 1-1.414-.586L.586 11.9A2 2 0 0 1 0 10.485v-4.97A2 2 0 0 1 .586 4.1L4.1.586Z" fill="currentColor" />
<path d="M8 3.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V4A.75.75 0 0 1 8 3.25Z" fill="#fff" />
<path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" />
</svg>
<svg v-else-if="positive" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" transform="rotate(180 8 8)" fill="currentColor" />
<path d="M11.5 4.94c.3.27.34.75.06 1.06l-4 4.5a.75.75 0 0 1-1.09.03l-2-2a.75.75 0 0 1 1.06-1.06l1.44 1.44L10.44 5a.75.75 0 0 1 1.06-.07Z" fill="#fff" />
</svg>
<svg v-else-if="warning" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M.24 12 6.16 1.09a2.1 2.1 0 0 1 3.68 0l5.92 10.93c.73 1.36-.28 2.99-1.85 2.99H2.1a2.04 2.04 0 0 1-1.85-3Z" fill="currentColor" />
<path d="M8 3.25c.41 0 .75.34.75.75v5a.75.75 0 0 1-1.5 0V4c0-.41.34-.75.75-.75Z" fill="#fff" />
<path d="M8.8 11.8a.8.8 0 1 1-1.6 0 .8.8 0 0 1 1.6 0Z" fill="#fff" />
</svg>
<svg v-else width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" fill="currentColor" />
<path d="M7.25 12a.75.75 0 0 0 1.5 0V8a.75.75 0 0 0-1.5 0v4ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" fill="#fff" />
</svg>
</div>
<div class="last-child:mb-0 text-14" data-test="content">
<p class="font-bold" v-if="title">{{ title }}</p>
<slot />
</div>
</div>
</div>
Expand All @@ -33,27 +41,34 @@ export default { name: 'wAlert' }
import { computed } from 'vue'
import { wExpandTransition } from '#generics'
import { createModel, modelProps } from 'create-v-model'
import { colorMap, possibleColorBooleans, colorBooleanProps } from './logic.js'
import { alert } from '@warp-ds/component-classes';

const props = defineProps({
title: String,
role: {
type: String,
default: 'alert'
},
...colorBooleanProps,
negative: Boolean,
positive: Boolean,
warning: Boolean,
info: Boolean,
...modelProps(),
})
const emit = defineEmits(['update:modelValue'])
const model = createModel({ props, emit })
const activeColor = computed(() => {
const activeType = possibleColorBooleans.find(e => props[e])
return colorMap[activeType]
})
const fillVar = computed(() => `var(--f-${activeColor.value}-600)`)
const wrapperStyle = computed(() => ({ borderLeftColor: fillVar.value }))
const wrapperClass = computed(() => ({
'border rounded-4 border-l-4 p-16': true,
[`bg-${activeColor.value}-50 border-${activeColor.value}-300`]: true
}))
</script>
});

const possibleTypeProps = ['negative', 'positive', 'warning', 'info'];

const emit = defineEmits(['update:modelValue']);
const model = createModel({ props, emit });
const alertColorType = computed(() => possibleTypeProps.find(e => props[e]));
const activeWrapperClassNames = computed(() => alert[alertColorType.value]);
const activeIconClassNames = computed(() => alert[`${alertColorType.value}Icon`]);
const wrapperClass = computed(() => [
alert.alert,
activeWrapperClassNames.value
]);
const iconClass = computed(() => [
alert.icon,
activeIconClassNames.value
]);
</script>
2 changes: 1 addition & 1 deletion dev/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Warp: Vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="./theme.css" />
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/tokens/v1/finn-no.css" />
</head>
<body>
<div id="app"></div>
Expand Down
66 changes: 0 additions & 66 deletions dev/theme.css
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.2",
"@warp-ds/uno": "^0.0.13",
"@warp-ds/uno": "1.0.0-alpha.5",
"@warp-ds/component-classes": "^1.0.0-alpha.13",
"cleave-lite": "^1.0.0",
"cz-conventional-changelog": "^3.3.0",
"drnm": "^0.9.0",
Expand Down
38 changes: 22 additions & 16 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion test/wAlert.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('alert', () => {
assert.equal(titleHtml.text(), title)
assert.include(html.html(), defaultSlot)
assert.include(wrapper.html(), '<svg ')
assert.include(wrapperHtml.classes().join(' '), 'bg-green')
assert.include(wrapperHtml.classes().join(' '), 'flex p-16 border border-l-4 rounded-4 i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border')
})
test('show/hide', async () => {
const model = ref(false)
Expand Down
4 changes: 3 additions & 1 deletion vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import { presetWarp } from '@warp-ds/uno'
import uno from 'unocss/vite'
import { MinifyWarpLib } from './.minifier-plugin.js'
import VitEik from 'viteik'
import { classes } from '@warp-ds/component-classes/classes';

export default defineConfig((env) => ({
plugins: [
vue(),
uno({
presets: [presetWarp({ development: true })]
presets: [presetWarp({ development: true })],
safelist: classes,
}),
env.mode !== 'lib' && VitEik(),
MinifyWarpLib(),
Expand Down