Skip to content

Commit 4cc8350

Browse files
johnn1sbo3sjohnn1sbo3s
authored
Merge pull request #866 from Sysvale/feature/text-component
Feature/text component
2 parents 46ec2c0 + 4e9149e commit 4cc8350

File tree

6 files changed

+406
-1
lines changed

6 files changed

+406
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sysvale/cuida",
3-
"version": "3.95.2",
3+
"version": "3.96.0",
44
"description": "A design system built by Sysvale, using storybook and Vue components",
55
"repository": {
66
"type": "git",

‎src/components/Text.vue‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!-- eslint-disable vue/multi-word-component-names -->
2+
<template>
3+
<component
4+
:is="computedAs"
5+
ref="componentRef"
6+
class="text-alignment"
7+
:class="{
8+
'no-margin': noMargin,
9+
[`${color}`]: color,
10+
}"
11+
>
12+
<slot />
13+
</component>
14+
</template>
15+
16+
<script setup>
17+
import { computed, useTemplateRef } from 'vue';
18+
19+
const props = defineProps({
20+
/**
21+
* A tag HTML que o componente deve renderizar.
22+
*/
23+
as: {
24+
type: String,
25+
default: 'span',
26+
},
27+
/**
28+
* Define a cor do texto. Aceita os tokes de cor do design system da shade 'neutrals'. Para cores fora da paleta neutra, utilize uma classe personalizada.
29+
*/
30+
color: {
31+
type: String,
32+
default: 'n-800',
33+
},
34+
/**
35+
* Define o alinhamento do texto.
36+
*/
37+
textAlign: {
38+
type: String,
39+
default: 'start',
40+
},
41+
/**
42+
* Remove as margens padrão de tags HTML como `p`, `h1`, `h2`, `h3`, etc.
43+
*/
44+
noMargin : {
45+
type: Boolean,
46+
default: false,
47+
}
48+
});
49+
50+
const componentRef = useTemplateRef('componentRef');
51+
52+
const computedAs = computed(() => {
53+
switch (props.as) {
54+
case 'h1':
55+
case 'h2':
56+
case 'h3':
57+
case 'h4':
58+
case 'h5':
59+
case 'h6':
60+
case 'p':
61+
case 'q':
62+
case 'span':
63+
case 'strong':
64+
case 'em':
65+
case 'del':
66+
case 'small':
67+
case 'legend':
68+
return props.as;
69+
case 'heading-1':
70+
return 'h1';
71+
case 'heading-2':
72+
return 'h2';
73+
case 'heading-3':
74+
return 'h3';
75+
case 'subheading-1':
76+
return 'h4';
77+
case 'subheading-2':
78+
return 'h5';
79+
case 'subheading-3':
80+
return 'h6';
81+
case 'body-1':
82+
return 'p';
83+
case 'body-2':
84+
return 'span';
85+
case 'caption':
86+
return 'small';
87+
case 'overline':
88+
return 'legend';
89+
default:
90+
return 'span';
91+
}
92+
});
93+
94+
defineExpose({ componentRef });
95+
96+
</script>
97+
98+
<style lang="scss" scoped>
99+
@import '../assets/sass/tokens.scss';
100+
101+
.text-alignment {
102+
text-align: v-bind(textAlign);
103+
}
104+
105+
.no-margin {
106+
margin-top: 0;
107+
margin-bottom: 0;
108+
}
109+
110+
.n-900 {
111+
color: $n-900;
112+
}
113+
114+
.n-800 {
115+
color: $n-800;
116+
}
117+
118+
.n-700 {
119+
color: $n-700;
120+
}
121+
122+
.n-600 {
123+
color: $n-600;
124+
}
125+
126+
.n-500 {
127+
color: $n-500;
128+
}
129+
130+
.n-400 {
131+
color: $n-400;
132+
}
133+
134+
.n-300 {
135+
color: $n-300;
136+
}
137+
138+
.n-200 {
139+
color: $n-200;
140+
}
141+
142+
.n-100 {
143+
color: $n-100;
144+
}
145+
146+
.n-50 {
147+
color: $n-50;
148+
}
149+
150+
.n-40 {
151+
color: $n-40;
152+
}
153+
154+
.n-30 {
155+
color: $n-30;
156+
}
157+
158+
.n-20 {
159+
color: $n-20;
160+
}
161+
162+
.n-10 {
163+
color: $n-10;
164+
}
165+
166+
.n-0 {
167+
color: $n-0;
168+
}
169+
170+
h1 {
171+
@include heading-1;
172+
}
173+
174+
h2 {
175+
@include heading-2;
176+
}
177+
178+
h3 {
179+
@include heading-3;
180+
}
181+
182+
h4 {
183+
@include subheading-1;
184+
}
185+
186+
h5 {
187+
@include subheading-2;
188+
}
189+
190+
h6 {
191+
@include subheading-3;
192+
}
193+
194+
p {
195+
@include body-1;
196+
}
197+
198+
span {
199+
@include body-2;
200+
}
201+
202+
small {
203+
@include caption;
204+
}
205+
206+
legend {
207+
@include overline;
208+
}
209+
</style>

‎src/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import StepperInput from './StepperInput.vue';
9696
import Switch from './Switch.vue';
9797
import Table from './Table.vue';
9898
import Tabs from './Tabs.vue';
99+
import Text from './Text.vue';
99100
import TextArea from './TextArea.vue';
100101
import TextInput from './TextInput.vue';
101102
import Tile from './Tile.vue';
@@ -219,6 +220,7 @@ export default {
219220
app.component('CdsSwitch', Switch);
220221
app.component('CdsTable', Table);
221222
app.component('CdsTabs', Tabs);
223+
app.component('CdsText', Text);
222224
app.component('CdsTextArea', TextArea);
223225
app.component('CdsTextInput', TextInput);
224226
app.component('CdsTile', Tile);

‎src/stories/components/Text.stories.mdx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
2+
import Text from '../../components/Text.vue';
3+
4+
<Meta
5+
title="Componentes/Typography/Text"
6+
component={ Text }
7+
argTypes={{
8+
as: {
9+
control:{
10+
type: 'select',
11+
options: [
12+
'h1',
13+
'h2',
14+
'h3',
15+
'h4',
16+
'h5',
17+
'h6',
18+
'heading-1',
19+
'heading-2',
20+
'heading-3',
21+
'subheading-1',
22+
'subheading-2',
23+
'subheading-3',
24+
'p',
25+
'q',
26+
'span',
27+
'body-1',
28+
'body-2',
29+
'caption',
30+
'overline',
31+
'strong',
32+
'em',
33+
'del',
34+
'small',
35+
'legend',
36+
],
37+
}
38+
},
39+
'textAlign': {
40+
control:{
41+
type: 'select',
42+
options: [
43+
'start',
44+
'center',
45+
'end',
46+
'justify'
47+
],
48+
}
49+
},
50+
}}
51+
parameters={{
52+
viewMode: 'docs',
53+
previewTabs: { canvas: { hidden: true }},
54+
docs: {
55+
source: {
56+
language: 'html',
57+
format:true,
58+
code: /*html*/
59+
`<cds-text
60+
as="span"
61+
textAlign='start'
62+
:noMargin="false"
63+
>
64+
O empenho em analisar o desenvolvimento contínuo de distintas formas de atuação obstaculiza a apreciação da importância do retorno esperado a longo prazo.
65+
</cds-text>`
66+
},
67+
}
68+
}}
69+
/>
70+
71+
export const Template = (args) => ({
72+
components: { CdsText: Text },
73+
setup() {
74+
return { args };
75+
},
76+
template: /*html*/ `
77+
<cds-text
78+
v-bind="args"
79+
>
80+
O empenho em analisar o desenvolvimento contínuo de distintas formas de atuação obstaculiza a apreciação da importância do retorno esperado a longo prazo.
81+
</cds-text>`,
82+
methods: {
83+
handleEmit(value) { console.info('value: ', value); }
84+
}
85+
});
86+
87+
88+
# Text
89+
90+
### Componentes Text permitem renderizar texto com diferentes estilos e configurações.
91+
---
92+
<br />
93+
94+
## Quando usar:
95+
- Quando quiser renderizar texto utilizando as definições tipográficas do design system para garantir consistência visual.
96+
- Quando quiser utilizar tags de texto HTML sem as margens padrão.
97+
98+
<br />
99+
100+
## Quando não usar:
101+
- Para exibir textos decorativos ou de realce dentro de botões e componentes interativos. Utilize a estilização apropriada para cada caso..
102+
103+
<br />
104+
105+
## Preview
106+
107+
<Canvas>
108+
<Story
109+
name="Text"
110+
args={{
111+
'as': "span",
112+
color: 'n-700',
113+
textAlign: 'start',
114+
noMargin: false,
115+
}}
116+
>
117+
{ Template.bind({}) }
118+
</Story>
119+
</Canvas>
120+
121+
<ArgsTable story="Text" />

0 commit comments

Comments
 (0)