Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 6a866fa

Browse files
codebender828codebender828
authored
Merge pull request #10 from chakra-ui/refactor/alert-icon
feat(alert): add alert icon component
2 parents c33b198 + 7cc72be commit 6a866fa

File tree

12 files changed

+197
-37
lines changed

12 files changed

+197
-37
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"bootstrap": "yarn run lerna bootstrap",
1414
"scaffold": "hygen",
1515
"build": "lerna run build --no-private --stream",
16-
"dev": "concurrently 'NODE_ENV=development vite serve playground --config ./vite.config.ts' 'yarn playground:routes'",
16+
"dev": "concurrently 'ts-node ./scripts/watch-files.ts' 'NODE_ENV=development vite serve playground --config ./vite.config.ts'",
1717
"playground:routes": "ts-node ./scripts/parse-routes.ts",
1818
"playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground --config ./vite.config.ts",
1919
"test": "jest",
@@ -51,6 +51,7 @@
5151
"@vuedx/typecheck": "^0.4.1",
5252
"@vuedx/typescript-plugin-vue": "^0.4.1",
5353
"babel-jest": "^26.6.3",
54+
"chokidar": "^3.5.1",
5455
"concurrently": "^5.3.0",
5556
"consola": "^2.15.0",
5657
"cross-env": "^7.0.2",

‎packages/c-alert/examples/fix-hover.vue

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎packages/c-alert/examples/with-accent.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
22
<c-alert status="success" mb="3">
3-
<c-alert-title> Info alert </c-alert-title>
3+
<c-alert-title> Solid alert </c-alert-title>
44
<c-alert-description> Something just happened </c-alert-description>
55
</c-alert>
66
<c-alert variant="subtle" status="success" mb="3">
7-
<c-alert-title> Info alert </c-alert-title>
7+
<c-alert-title> Subtle alert </c-alert-title>
88
<c-alert-description> Something just happened </c-alert-description>
99
</c-alert>
1010
<c-alert variant="left-accent" status="success" mb="3">
11-
<c-alert-title> Info alert </c-alert-title>
11+
<c-alert-title> Left accent alert </c-alert-title>
1212
<c-alert-description> Something just happened </c-alert-description>
1313
</c-alert>
1414
<c-alert variant="top-accent" status="success" mb="3">
15-
<c-alert-title> Info alert </c-alert-title>
15+
<c-alert-title> Top accent alert </c-alert-title>
1616
<c-alert-description> Something just happened </c-alert-description>
1717
</c-alert>
1818
</template>

‎packages/c-alert/examples/with-icon.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<c-alert variant="left-accent" status="info" mb="3">
3+
<c-alert-icon mr="2" />
4+
<c-alert-title> Info alert </c-alert-title>
5+
<c-alert-description> Something just happened </c-alert-description>
6+
</c-alert>
7+
<c-alert variant="left-accent" status="warning" mb="3">
8+
<c-alert-icon mr="2" />
9+
<c-alert-title> Warning alert </c-alert-title>
10+
<c-alert-description> Something just happened </c-alert-description>
11+
</c-alert>
12+
<c-alert variant="left-accent" status="success" mb="3">
13+
<c-alert-icon mr="2" />
14+
<c-alert-title> Success alert </c-alert-title>
15+
<c-alert-description> Something just happened </c-alert-description>
16+
</c-alert>
17+
<c-alert variant="left-accent" status="error" mb="3">
18+
<c-alert-icon mr="2" />
19+
<c-alert-title> Error alert </c-alert-title>
20+
<c-alert-description> Something just happened </c-alert-description>
21+
</c-alert>
22+
</template>
23+
24+
<script lang="ts">
25+
import {
26+
CAlert,
27+
CAlertIcon,
28+
CAlertTitle,
29+
CAlertDescription,
30+
} from '@chakra-ui/c-alert/src'
31+
import { defineComponent } from 'vue'
32+
33+
export default defineComponent({
34+
name: 'WithIconAlertExample',
35+
components: { CAlert, CAlertIcon, CAlertTitle, CAlertDescription },
36+
})
37+
</script>

‎packages/c-alert/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
},
2626
"dependencies": {
2727
"@chakra-ui/styled-system": "^1.4.1",
28-
"@chakra-ui/vue-system": "*"
28+
"@chakra-ui/vue-system": "*",
29+
"@chakra-ui/c-icon": "*"
2930
}
3031
}

‎packages/c-alert/src/alert.ts

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h, defineComponent, PropType, provide } from 'vue'
1+
import { h, defineComponent, PropType, provide, inject, computed } from 'vue'
22
import {
33
chakra,
44
ColorScheme,
@@ -10,19 +10,24 @@ import {
1010
DOMElements,
1111
} from '@chakra-ui/vue-system'
1212
import { SystemStyleObject } from '@chakra-ui/styled-system'
13+
import { CIcon } from '@chakra-ui/c-icon'
1314

1415
const STATUSES = {
1516
info: {
1617
colorScheme: 'blue' as ColorScheme,
18+
icon: 'info',
1719
},
1820
success: {
1921
colorScheme: 'green' as ColorScheme,
22+
icon: 'check-circle',
2023
},
2124
warning: {
2225
colorScheme: 'orange' as ColorScheme,
26+
icon: 'warning-alt',
2327
},
2428
error: {
2529
colorScheme: 'red' as ColorScheme,
30+
icon: 'warning',
2631
},
2732
}
2833

@@ -139,5 +144,31 @@ export const CAlertDescription = defineComponent({
139144
},
140145
})
141146

142-
// TODO: Add CAlertIcon component.
143-
// This should ne done after the icon component is created.
147+
/**
148+
* CAlertIcon component
149+
*
150+
* The Icon component for alerts
151+
*/
152+
export const CAlertIcon = defineComponent({
153+
name: 'CAlertIcon',
154+
props: {
155+
icon: {
156+
type: [String] as PropType<string>,
157+
},
158+
},
159+
setup(props, { attrs }) {
160+
const alertState = inject<AlertState>('$AlertState')
161+
const { icon } = STATUSES[alertState?.status as AlertStatus]
162+
const styles = useComponentStyles('Alert')
163+
164+
const alertIcon = computed(() => props.icon || icon)
165+
166+
return () =>
167+
h(CIcon, {
168+
class: 'alert__icon',
169+
name: alertIcon.value,
170+
...styles.icon,
171+
...attrs,
172+
})
173+
},
174+
})

‎packages/c-alert/tests/__snapshots__/c-alert.test.ts.snap

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,67 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Alert tests should render properly 1`] = `
3+
exports[`should render all children 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="chakra-alert css-wtzaz1"
7+
data-testid="alert"
8+
role="alert"
9+
>
10+
<svg
11+
class="alert__icon chakra-icon css-139yi2r"
12+
focusable="false"
13+
viewBox="0 0 24 24"
14+
>
15+
16+
17+
<g
18+
stroke="currentColor"
19+
strokewidth="1.5"
20+
>
21+
22+
23+
<path
24+
d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
25+
fill="none"
26+
strokelinecap="round"
27+
/>
28+
29+
30+
<path
31+
d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
32+
fill="currentColor"
33+
strokelinecap="round"
34+
/>
35+
36+
37+
<circle
38+
cx="12"
39+
cy="12"
40+
fill="none"
41+
r="11.25"
42+
strokemiterlimit="10"
43+
/>
44+
45+
46+
</g>
47+
48+
49+
</svg>
50+
<div
51+
class="chakra-alert__title css-14esyki"
52+
>
53+
Info alert
54+
</div>
55+
<div
56+
class="chakra-alert__description css-5le3e4"
57+
>
58+
Something just happened
59+
</div>
60+
</div>
61+
</DocumentFragment>
62+
`;
63+
64+
exports[`should render properly 1`] = `
465
<DocumentFragment>
566
<div
667
class="chakra-alert css-15689h3"

‎packages/c-alert/tests/c-alert.test.ts

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
11
import { render } from '../../test-utils/src'
2-
import { CAlert } from '../src'
2+
import { CAlert, CAlertDescription, CAlertIcon, CAlertTitle } from '../src'
33

4-
describe('Alert tests', () => {
5-
it('should render properly', () => {
6-
const { asFragment } = render(CAlert)
7-
expect(asFragment()).toMatchSnapshot()
4+
const renderComponent = (props?: any) =>
5+
render({
6+
components: { CAlert, CAlertDescription, CAlertIcon, CAlertTitle },
7+
template: `
8+
<c-alert data-testid="alert" variant="left-accent" status="info" mb="3">
9+
<c-alert-icon mr="2" />
10+
<c-alert-title> Info alert </c-alert-title>
11+
<c-alert-description> Something just happened </c-alert-description>
12+
</c-alert>`,
13+
...props,
814
})
15+
16+
it('should render properly', () => {
17+
const { asFragment } = render(CAlert)
18+
expect(asFragment()).toMatchSnapshot()
19+
})
20+
21+
it('should render all children', () => {
22+
const { asFragment } = renderComponent()
23+
expect(asFragment()).toMatchSnapshot()
24+
})
25+
26+
it('should possess correct role attributes', () => {
27+
const { getByTestId } = renderComponent()
28+
expect(getByTestId('alert')).toHaveAttribute('role', 'alert')
929
})

‎playground/src/.generated/imports.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Component_1 from "../components/Home.vue";
22
import Component_2 from '@chakra-ui/c-alert/examples/base-alert.vue'
3-
import Component_3 from '@chakra-ui/c-alert/examples/fix-hover.vue'
4-
import Component_4 from '@chakra-ui/c-alert/examples/with-accent.vue'
3+
import Component_3 from '@chakra-ui/c-alert/examples/with-accent.vue'
4+
import Component_4 from '@chakra-ui/c-alert/examples/with-icon.vue'
55
import Component_5 from '@chakra-ui/c-alert/examples/with-status.vue'
66
import Component_6 from '@chakra-ui/c-alert/examples/with-title.vue'
77
import Component_7 from '@chakra-ui/c-button/examples/base-button.vue'
@@ -14,8 +14,8 @@ import Component_12 from "../components/Home.vue";
1414
export default {
1515
"../components/Home.vue": Component_12,
1616
"@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
17-
"@chakra-ui/c-alert/examples/fix-hover.vue": Component_3,
18-
"@chakra-ui/c-alert/examples/with-accent.vue": Component_4,
17+
"@chakra-ui/c-alert/examples/with-accent.vue": Component_3,
18+
"@chakra-ui/c-alert/examples/with-icon.vue": Component_4,
1919
"@chakra-ui/c-alert/examples/with-status.vue": Component_5,
2020
"@chakra-ui/c-alert/examples/with-title.vue": Component_6,
2121
"@chakra-ui/c-button/examples/base-button.vue": Component_7,

‎playground/src/.generated/routes.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
"path": "/c-alert/base-alert",
1414
"component": "@chakra-ui/c-alert/examples/base-alert.vue"
1515
},
16-
{
17-
"name": "Fix hover",
18-
"path": "/c-alert/fix-hover",
19-
"component": "@chakra-ui/c-alert/examples/fix-hover.vue"
20-
},
2116
{
2217
"name": "With accent",
2318
"path": "/c-alert/with-accent",
2419
"component": "@chakra-ui/c-alert/examples/with-accent.vue"
2520
},
21+
{
22+
"name": "With icon",
23+
"path": "/c-alert/with-icon",
24+
"component": "@chakra-ui/c-alert/examples/with-icon.vue"
25+
},
2626
{
2727
"name": "With status",
2828
"path": "/c-alert/with-status",

0 commit comments

Comments
 (0)