@rededor/cura 0.5.0 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-0e3b7fc6.js → app-globals-2988084b.js} +5 -5
- package/dist/cjs/app-globals-2988084b.js.map +1 -0
- package/dist/cjs/cura-accordion_8.cjs.entry.js +452 -0
- package/dist/cjs/cura-accordion_8.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js +83 -0
- package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js +83 -0
- package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-display.cjs.entry.js +74 -0
- package/dist/cjs/cura-display.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js +29 -0
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-label.cjs.entry.js +69 -0
- package/dist/cjs/cura-label.cjs.entry.js.map +1 -0
- package/dist/cjs/cura.cjs.js +3 -3
- package/dist/cjs/{index-72217b50.js → index-404d93e9.js} +247 -3
- package/dist/cjs/index-404d93e9.js.map +1 -0
- package/dist/cjs/index.cjs.js +7 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/api/cura-api.type.js.map +1 -1
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js +1 -1
- package/dist/collection/api/modules/cura-theme-breakpoints-module.js.map +1 -1
- package/dist/collection/api/modules/cura-theme-colors-module.js +1 -1
- package/dist/collection/api/modules/cura-theme-colors-module.js.map +1 -1
- package/dist/collection/api/theme-presets/static.js +2 -2
- package/dist/collection/api/theme-presets/static.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js +1 -1
- package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js.map +1 -1
- package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.css +10 -6
- package/dist/collection/components/buttons/cura-button/cura-button.js +4 -3
- package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +4 -3
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +4 -3
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js +1 -1
- package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js +1 -1
- package/dist/collection/components/cura-icon/cura-icon.stories.js.map +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js +1 -1
- package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js.map +1 -1
- package/dist/collection/components/cura-page-template/cura-page-template.css +13 -9
- package/dist/collection/components/forms/cura-label/cura-label.css +70 -0
- package/dist/collection/components/forms/cura-label/cura-label.js +190 -0
- package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -0
- package/dist/collection/components/forms/cura-label/cura-label.stories.js +137 -0
- package/dist/collection/components/forms/cura-label/cura-label.stories.js.map +1 -0
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js +1 -1
- package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map +1 -1
- package/dist/collection/components/text/cura-display/cura-display.css +21 -38
- package/dist/collection/components/text/cura-display/cura-display.js +80 -49
- package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
- package/dist/collection/components/text/cura-display/cura-display.stories.js +79 -34
- package/dist/collection/components/text/cura-display/cura-display.stories.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.css +50 -24
- package/dist/collection/components/text/cura-heading/cura-heading.js +94 -39
- package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
- package/dist/collection/components/text/cura-heading/cura-heading.stories.js +93 -37
- package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +37 -38
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +62 -41
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -1
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +79 -47
- package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
- package/dist/collection/index.js +3 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/components/cura-accordion-item.js +1 -1
- package/dist/components/cura-accordion-item.js.map +1 -1
- package/dist/components/cura-button-outline.js +1 -1
- package/dist/components/cura-button-outline.js.map +1 -1
- package/dist/components/cura-button-transparent.js +1 -1
- package/dist/components/cura-button-transparent.js.map +1 -1
- package/dist/components/cura-button.js +1 -1
- package/dist/components/cura-button.js.map +1 -1
- package/dist/components/cura-display.js +41 -35
- package/dist/components/cura-display.js.map +1 -1
- package/dist/components/cura-heading.js +34 -21
- package/dist/components/cura-heading.js.map +1 -1
- package/dist/components/cura-label.d.ts +11 -0
- package/dist/components/cura-label.js +91 -0
- package/dist/components/cura-label.js.map +1 -0
- package/dist/components/cura-page-template.js +1 -1
- package/dist/components/cura-page-template.js.map +1 -1
- package/dist/components/cura-paragraph.js +25 -23
- package/dist/components/cura-paragraph.js.map +1 -1
- package/dist/components/index.js +11 -5
- package/dist/components/index.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/cura.js +1 -1
- package/dist/cura/index.esm.js +1 -1
- package/dist/cura/index.esm.js.map +1 -1
- package/dist/cura/p-03047b3e.entry.js +2 -0
- package/dist/cura/p-03047b3e.entry.js.map +1 -0
- package/dist/cura/p-0c79c54e.entry.js +2 -0
- package/dist/cura/p-0c79c54e.entry.js.map +1 -0
- package/dist/cura/p-120926c5.system.js +2 -0
- package/dist/cura/p-120926c5.system.js.map +1 -0
- package/dist/cura/p-223924fb.system.entry.js +2 -0
- package/dist/cura/p-223924fb.system.entry.js.map +1 -0
- package/dist/cura/p-46d20db3.js +3 -0
- package/dist/cura/p-46d20db3.js.map +1 -0
- package/dist/cura/p-48426f60.system.js +2 -0
- package/dist/cura/p-48426f60.system.js.map +1 -0
- package/dist/cura/p-49813052.entry.js +2 -0
- package/dist/cura/p-49813052.entry.js.map +1 -0
- package/dist/cura/p-4bdbcdf0.system.entry.js +2 -0
- package/dist/cura/p-4bdbcdf0.system.entry.js.map +1 -0
- package/dist/cura/p-7c8f3c77.system.entry.js +2 -0
- package/dist/cura/p-7c8f3c77.system.entry.js.map +1 -0
- package/dist/cura/p-8b18b5f7.system.js +2 -0
- package/dist/cura/p-8b18b5f7.system.js.map +1 -0
- package/dist/cura/p-91b0f78e.entry.js +2 -0
- package/dist/cura/p-91b0f78e.entry.js.map +1 -0
- package/dist/cura/p-a0395f90.entry.js +2 -0
- package/dist/cura/p-a0395f90.entry.js.map +1 -0
- package/dist/cura/p-a7ef255f.entry.js +2 -0
- package/dist/cura/p-a7ef255f.entry.js.map +1 -0
- package/dist/cura/p-c0c00396.system.js +3 -0
- package/dist/cura/p-c0c00396.system.js.map +1 -0
- package/dist/cura/p-ca054b07.system.entry.js +2 -0
- package/dist/cura/p-ca054b07.system.entry.js.map +1 -0
- package/dist/cura/p-d47b9cfe.system.entry.js +2 -0
- package/dist/cura/p-d47b9cfe.system.entry.js.map +1 -0
- package/dist/cura/p-f8fffdc1.js +2 -0
- package/dist/cura/p-f8fffdc1.js.map +1 -0
- package/dist/cura/p-fc77814b.system.entry.js +2 -0
- package/dist/cura/p-fc77814b.system.entry.js.map +1 -0
- package/dist/esm/{app-globals-cc003eaf.js → app-globals-29001758.js} +5 -5
- package/dist/esm/app-globals-29001758.js.map +1 -0
- package/dist/esm/cura-accordion_8.entry.js +441 -0
- package/dist/esm/cura-accordion_8.entry.js.map +1 -0
- package/dist/esm/cura-button-outline.entry.js +79 -0
- package/dist/esm/cura-button-outline.entry.js.map +1 -0
- package/dist/esm/cura-button-transparent.entry.js +79 -0
- package/dist/esm/cura-button-transparent.entry.js.map +1 -0
- package/dist/esm/cura-display.entry.js +70 -0
- package/dist/esm/cura-display.entry.js.map +1 -0
- package/dist/esm/cura-icons-view.entry.js +25 -0
- package/dist/esm/cura-icons-view.entry.js.map +1 -0
- package/dist/esm/cura-label.entry.js +65 -0
- package/dist/esm/cura-label.entry.js.map +1 -0
- package/dist/esm/cura.js +4 -4
- package/dist/esm/{index-9af0cdbd.js → index-d99da69e.js} +247 -3
- package/dist/esm/index-d99da69e.js.map +1 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm-es5/app-globals-29001758.js +2 -0
- package/dist/esm-es5/app-globals-29001758.js.map +1 -0
- package/dist/esm-es5/cura-accordion_8.entry.js +2 -0
- package/dist/esm-es5/cura-accordion_8.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-outline.entry.js +2 -0
- package/dist/esm-es5/cura-button-outline.entry.js.map +1 -0
- package/dist/esm-es5/cura-button-transparent.entry.js +2 -0
- package/dist/esm-es5/cura-button-transparent.entry.js.map +1 -0
- package/dist/esm-es5/cura-display.entry.js +2 -0
- package/dist/esm-es5/cura-display.entry.js.map +1 -0
- package/dist/esm-es5/cura-icons-view.entry.js +2 -0
- package/dist/esm-es5/cura-icons-view.entry.js.map +1 -0
- package/dist/esm-es5/cura-label.entry.js +2 -0
- package/dist/esm-es5/cura-label.entry.js.map +1 -0
- package/dist/esm-es5/cura.js +1 -1
- package/dist/esm-es5/cura.js.map +1 -1
- package/dist/esm-es5/index-d99da69e.js +3 -0
- package/dist/esm-es5/index-d99da69e.js.map +1 -0
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/index.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/types/api/cura-api.type.d.ts +1 -0
- package/dist/types/components/buttons/cura-button/cura-button.d.ts +1 -1
- package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +1 -1
- package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +1 -1
- package/dist/types/components/forms/cura-label/cura-label.d.ts +54 -0
- package/dist/types/components/forms/cura-label/cura-label.stories.d.ts +126 -0
- package/dist/types/components/text/cura-display/cura-display.d.ts +29 -18
- package/dist/types/components/text/cura-display/cura-display.stories.d.ts +52 -14
- package/dist/types/components/text/cura-heading/cura-heading.d.ts +34 -17
- package/dist/types/components/text/cura-heading/cura-heading.stories.d.ts +58 -6
- package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts +24 -12
- package/dist/types/components/text/cura-paragraph/cura-paragraph.stories.d.ts +47 -9
- package/dist/types/components.d.ts +145 -52
- package/dist/types/index.d.ts +9 -0
- package/package.json +2 -4
- package/dist/cjs/app-globals-0e3b7fc6.js.map +0 -1
- package/dist/cjs/cura-accordion_12.cjs.entry.js +0 -674
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +0 -1
- package/dist/cjs/index-72217b50.js.map +0 -1
- package/dist/cura/p-2cbf52f1.js +0 -3
- package/dist/cura/p-2cbf52f1.js.map +0 -1
- package/dist/cura/p-4cdbc8a1.system.entry.js +0 -2
- package/dist/cura/p-4cdbc8a1.system.entry.js.map +0 -1
- package/dist/cura/p-50ea2036.system.js +0 -2
- package/dist/cura/p-50ea2036.system.js.map +0 -1
- package/dist/cura/p-788e035b.system.js +0 -2
- package/dist/cura/p-788e035b.system.js.map +0 -1
- package/dist/cura/p-8da635b7.system.js +0 -3
- package/dist/cura/p-8da635b7.system.js.map +0 -1
- package/dist/cura/p-c54ce246.entry.js +0 -2
- package/dist/cura/p-c54ce246.entry.js.map +0 -1
- package/dist/cura/p-d5c64a5f.js +0 -2
- package/dist/cura/p-d5c64a5f.js.map +0 -1
- package/dist/cura/p-f4232daa.system.js +0 -2
- package/dist/cura/p-f4232daa.system.js.map +0 -1
- package/dist/esm/app-globals-cc003eaf.js.map +0 -1
- package/dist/esm/cura-accordion_12.entry.js +0 -659
- package/dist/esm/cura-accordion_12.entry.js.map +0 -1
- package/dist/esm/index-9af0cdbd.js.map +0 -1
- package/dist/esm-es5/app-globals-cc003eaf.js +0 -2
- package/dist/esm-es5/app-globals-cc003eaf.js.map +0 -1
- package/dist/esm-es5/cura-accordion_12.entry.js +0 -2
- package/dist/esm-es5/cura-accordion_12.entry.js.map +0 -1
- package/dist/esm-es5/index-9af0cdbd.js +0 -3
- package/dist/esm-es5/index-9af0cdbd.js.map +0 -1
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
};
|
|
13
13
|
import iconNames from '../../../assets/icons/iconset-default-list';
|
|
14
14
|
export default {
|
|
15
|
-
title: '
|
|
15
|
+
title: 'Componentes/Buttons/Button Transparent',
|
|
16
16
|
tags: ['autodocs'],
|
|
17
17
|
render: (_a) => {
|
|
18
18
|
var { label } = _a, args = __rest(_a, ["label"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,eAAe;EACb,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n title: 'Componentes/Buttons/Button Transparent',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n // You can either use a function to create DOM elements or use a plain html string!\n // return `<div>${label}</div>`;\n return `<cura-button-transparent\n size=\"${args.size}\"\n disabled=\"${args.disabled}\"\n is-loading=\"${args.isLoading}\"\n color=\"${args.color}\"\n font-color=\"${args.fontColor}\"\n icon-name=\"${args.iconName}\"\n icon-position=\"${args.iconPosition}\"\n icon-only=\"${args.iconOnly}\"\n href=\"${args.href}\"\n target=\"${args.target}\"\n text-align=\"${args.textAlign}\"\n style=\"${args.fullWidth ? 'width: 100%;' : ''}\">\n ${label}\n</cura-button-transparent>`;\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n name: 'Label'\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: 'false'}\n }\n },\n isLoading: {\n control: 'boolean',\n description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n table: {\n category: 'State',\n defaultValue: { summary: 'false'}\n },\n name: 'is-loading'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium'}\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent'}\n }\n },\n fontColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define cor clara ou escura de acordo com contexto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'dark'}\n },\n name: 'font-color'\n },\n textAlign: {\n control: { type: 'inline-radio' },\n options: ['left', 'center', 'right'],\n description: 'Alinha texto de múltiplas linhas.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left'}\n },\n name: 'text-align'\n },\n fullWidth: {\n control: 'boolean',\n description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n table: {\n category: 'CSS',\n defaultValue: { summary: 'false'}\n }\n },\n iconName: {\n control: {type: 'select' },\n options: iconNames,\n description: 'Nome do ícone a ser utilizado no iconset.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n iconPosition: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do ícone no botão.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'left'}\n },\n name: 'icon-position'\n },\n iconOnly: {\n control: 'boolean',\n description: 'Oculta o label do botão exibindo somente o ícone.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'false'}\n },\n name: 'icon-only'\n },\n href: {\n control: 'text',\n description: `Se definido o elemento de ação renderizado internamente será um link.`,\n table: {\n category: 'Properties'\n }\n },\n target: {\n control: 'text',\n description: 'Define o comportamento de abertura do link quando href for informado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '_self'}\n }\n }\n },\n};\n\nexport const ButtonTransparent = {\n args: {\n label: 'Button',\n size: 'medium',\n color: 'primary',\n fontColor: 'dark',\n textAlign: 'left',\n iconName: iconNames[0],\n iconPosition: 'left',\n iconOnly: false,\n disabled: false,\n isLoading: false,\n href: '',\n target: '_self',\n fullWidth: false,\n },\n};\n"]}
|
|
@@ -14,7 +14,7 @@ import iconNames from '../../assets/icons/iconset-default-list';
|
|
|
14
14
|
import { getColorsWithDepths } from "../../utils/utils";
|
|
15
15
|
const colors = getColorsWithDepths();
|
|
16
16
|
export default {
|
|
17
|
-
title: '
|
|
17
|
+
title: 'Componentes/Icons/Icon',
|
|
18
18
|
tags: ['autodocs'],
|
|
19
19
|
render: (_a) => {
|
|
20
20
|
var { label } = _a, args = __rest(_a, ["label"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAChE,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,2BAA2B;MACxC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n title: 'Componentes/Icons/Icon',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n // You can either use a function to create DOM elements or use a plain html string!\n // return `<div>${label}</div>`;\n return `<cura-icon\n name=\"${args.name}\"\n color=\"${args.color}\"\n size=\"${args.size}\"\n disabled=\"${args.disabled}\">\n</cura-icon>`;\n },\n argTypes: {\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado',\n table: {\n category: 'State',\n defaultValue: { summary: 'false'}\n }\n },\n size: {\n control: { type: 'select' },\n options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '24'}\n }\n },\n color: {\n control: { type: 'select' },\n options: colors,\n description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'neutral'}\n }\n },\n name: {\n control: {type: 'select' },\n options: iconNames,\n description: 'Nome do ícone no iconset.',\n table: {\n category: 'Properties'\n }\n }\n },\n};\n\nexport const Icon = {\n args: {\n name: iconNames[0],\n size: '24',\n color: 'neutral',\n disabled: false,\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-icons-view.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.stories.tsx"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"cura-icons-view.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.stories.tsx"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,mCAAmC;EAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,GAAG,EAAE;IACX,mFAAmF;IACnF,gCAAgC;IAChC,OAAO,qCAAqC,CAAC;EAC/C,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n title: 'Componentes/Icons/Iconset Default',\n tags: ['autodocs'],\n render: () => {\n // You can either use a function to create DOM elements or use a plain html string!\n // return `<div>${label}</div>`;\n return `<cura-icons-view></cura-icons-view>`;\n },\n};\n\nexport const IconsetDefault = {};\n"]}
|
|
@@ -11,14 +11,18 @@
|
|
|
11
11
|
* Responsive media for large only.
|
|
12
12
|
* Use: @include large-only() { ... }
|
|
13
13
|
*/
|
|
14
|
-
/**
|
|
15
|
-
* Responsive media for large and up.
|
|
16
|
-
* Use: @include large-up() { ... }
|
|
17
|
-
*/
|
|
18
14
|
/**
|
|
19
15
|
* Responsive media for xlarge only.
|
|
20
16
|
* Use: @include xlarge-only() { ... }
|
|
21
17
|
*/
|
|
18
|
+
/**
|
|
19
|
+
* Responsive media for medium to large.
|
|
20
|
+
* Use: @include medium-large() { ... }
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Responsive media for large and up.
|
|
24
|
+
* Use: @include large-up() { ... }
|
|
25
|
+
*/
|
|
22
26
|
:host {
|
|
23
27
|
display: block;
|
|
24
28
|
}
|
|
@@ -49,17 +53,17 @@
|
|
|
49
53
|
:host .grid-template #sub-footer {
|
|
50
54
|
grid-area: sub-footer;
|
|
51
55
|
}
|
|
52
|
-
@media (max-width:
|
|
56
|
+
@media (max-width: 768px) {
|
|
53
57
|
:host .grid-template {
|
|
54
58
|
padding: 0px;
|
|
55
59
|
}
|
|
56
60
|
}
|
|
57
|
-
@media (min-width:
|
|
61
|
+
@media (min-width: 769px) and (max-width: 992px) {
|
|
58
62
|
:host .grid-template {
|
|
59
63
|
padding: 0px;
|
|
60
64
|
}
|
|
61
65
|
}
|
|
62
|
-
@media (min-width:
|
|
66
|
+
@media (min-width: 993px) and (max-width: 1920px) {
|
|
63
67
|
:host .grid-template {
|
|
64
68
|
padding: 0px;
|
|
65
69
|
}
|
|
@@ -79,7 +83,7 @@
|
|
|
79
83
|
max-width: 20%;
|
|
80
84
|
}
|
|
81
85
|
}
|
|
82
|
-
@media (min-width:
|
|
86
|
+
@media (min-width: 1921px) {
|
|
83
87
|
:host .grid-template {
|
|
84
88
|
padding: 0px;
|
|
85
89
|
}
|
|
@@ -99,7 +103,7 @@
|
|
|
99
103
|
max-width: 20%;
|
|
100
104
|
}
|
|
101
105
|
:host .grid-template #content-container.centered {
|
|
102
|
-
max-width:
|
|
106
|
+
max-width: 1921px;
|
|
103
107
|
justify-self: center;
|
|
104
108
|
}
|
|
105
109
|
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* Breakpoints variables */
|
|
2
|
+
/**
|
|
3
|
+
* Responsive media for mobile (small) only.
|
|
4
|
+
* Use: @include mobile-only() { ... }
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Responsive media for medium only.
|
|
8
|
+
* Use: @include medium-only() { ... }
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* Responsive media for large only.
|
|
12
|
+
* Use: @include large-only() { ... }
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Responsive media for xlarge only.
|
|
16
|
+
* Use: @include xlarge-only() { ... }
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* Responsive media for medium to large.
|
|
20
|
+
* Use: @include medium-large() { ... }
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Responsive media for large and up.
|
|
24
|
+
* Use: @include large-up() { ... }
|
|
25
|
+
*/
|
|
26
|
+
:host {
|
|
27
|
+
display: block;
|
|
28
|
+
font-size: var(--font-size-base);
|
|
29
|
+
}
|
|
30
|
+
:host p {
|
|
31
|
+
font-family: var(--font-family);
|
|
32
|
+
font-size: 1.143em;
|
|
33
|
+
font-weight: var(--font-weight-medium);
|
|
34
|
+
color: var(--color-body);
|
|
35
|
+
line-height: var(--line-height);
|
|
36
|
+
margin-block: var(--margin-block);
|
|
37
|
+
letter-spacing: 0.32px;
|
|
38
|
+
}
|
|
39
|
+
:host p.bold-weight, :host p ::slotted(b), :host p ::slotted(strong), :host p ::slotted(u) {
|
|
40
|
+
font-weight: var(--font-weight-bold);
|
|
41
|
+
}
|
|
42
|
+
:host p.large {
|
|
43
|
+
font-size: 1.357em;
|
|
44
|
+
line-height: calc(var(--line-height) - 4%);
|
|
45
|
+
letter-spacing: 0px;
|
|
46
|
+
}
|
|
47
|
+
:host p.small {
|
|
48
|
+
font-size: 1em;
|
|
49
|
+
line-height: calc(var(--line-height) - 4%);
|
|
50
|
+
letter-spacing: 0.56px;
|
|
51
|
+
}
|
|
52
|
+
:host p.xsmall {
|
|
53
|
+
font-size: 0.857em;
|
|
54
|
+
line-height: calc(var(--line-height) - 17%);
|
|
55
|
+
letter-spacing: 0.72px;
|
|
56
|
+
}
|
|
57
|
+
:host ::slotted(a) {
|
|
58
|
+
font-weight: var(--font-weight-bold);
|
|
59
|
+
color: var(--color-link);
|
|
60
|
+
text-underline-offset: 10%;
|
|
61
|
+
}
|
|
62
|
+
:host ::slotted(u) {
|
|
63
|
+
text-underline-offset: 10%;
|
|
64
|
+
}
|
|
65
|
+
:host ::slotted(abbr) {
|
|
66
|
+
color: var(--color-link);
|
|
67
|
+
text-decoration: underline dashed 1px var(--color-link);
|
|
68
|
+
text-underline-offset: 10%;
|
|
69
|
+
cursor: default;
|
|
70
|
+
}
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
export class CuraLabel {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.theme = window.CuraAPI.theme;
|
|
5
|
+
this.size = 'medium';
|
|
6
|
+
this.weight = 'regular';
|
|
7
|
+
this.spotColor = 'accent-dark';
|
|
8
|
+
this.color = undefined;
|
|
9
|
+
this.marginBlock = '0';
|
|
10
|
+
this.lineHeight = '125%';
|
|
11
|
+
this.styles = {};
|
|
12
|
+
}
|
|
13
|
+
handleChangeColor() {
|
|
14
|
+
this.setColors();
|
|
15
|
+
}
|
|
16
|
+
connectedCallback() {
|
|
17
|
+
this.setFontProperties();
|
|
18
|
+
this.setColors();
|
|
19
|
+
}
|
|
20
|
+
getClasses() {
|
|
21
|
+
const sizeclass = {};
|
|
22
|
+
sizeclass[this.size.toLowerCase()] = true;
|
|
23
|
+
sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
|
|
24
|
+
return sizeclass;
|
|
25
|
+
}
|
|
26
|
+
setFontProperties() {
|
|
27
|
+
this.weights = this.theme.fonts.getWeights();
|
|
28
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
29
|
+
this.styles = {
|
|
30
|
+
'--font-family': this.theme.fonts.getFamily('body'),
|
|
31
|
+
'--font-weight-medium': this.weights.medium,
|
|
32
|
+
'--font-weight-bold': this.weights.bold
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
setColors() {
|
|
36
|
+
const fontColor = this.color
|
|
37
|
+
? this.theme.colors.getColor(this.color)
|
|
38
|
+
: this.theme.fonts.getColor();
|
|
39
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
40
|
+
}
|
|
41
|
+
hostCSSProperties() {
|
|
42
|
+
return {
|
|
43
|
+
'--margin-block': this.marginBlock,
|
|
44
|
+
'--font-size-base': this.fontSizeBase,
|
|
45
|
+
'--line-height': this.lineHeight
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
render() {
|
|
49
|
+
return (h(Host, { style: this.hostCSSProperties() }, h("p", { style: this.styles, class: this.getClasses() }, h("slot", null))));
|
|
50
|
+
}
|
|
51
|
+
static get is() { return "cura-label"; }
|
|
52
|
+
static get encapsulation() { return "shadow"; }
|
|
53
|
+
static get originalStyleUrls() {
|
|
54
|
+
return {
|
|
55
|
+
"$": ["cura-label.scss"]
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
static get styleUrls() {
|
|
59
|
+
return {
|
|
60
|
+
"$": ["cura-label.css"]
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
static get properties() {
|
|
64
|
+
return {
|
|
65
|
+
"size": {
|
|
66
|
+
"type": "string",
|
|
67
|
+
"mutable": false,
|
|
68
|
+
"complexType": {
|
|
69
|
+
"original": "'medium' | 'large' | 'small' | 'xsmall'",
|
|
70
|
+
"resolved": "\"large\" | \"medium\" | \"small\" | \"xsmall\"",
|
|
71
|
+
"references": {}
|
|
72
|
+
},
|
|
73
|
+
"required": false,
|
|
74
|
+
"optional": false,
|
|
75
|
+
"docs": {
|
|
76
|
+
"tags": [],
|
|
77
|
+
"text": "Set size of body text.\nValues: medium (default) | large | small | xsmall."
|
|
78
|
+
},
|
|
79
|
+
"attribute": "size",
|
|
80
|
+
"reflect": true,
|
|
81
|
+
"defaultValue": "'medium'"
|
|
82
|
+
},
|
|
83
|
+
"weight": {
|
|
84
|
+
"type": "string",
|
|
85
|
+
"mutable": false,
|
|
86
|
+
"complexType": {
|
|
87
|
+
"original": "'regular' | 'bold'",
|
|
88
|
+
"resolved": "\"bold\" | \"regular\"",
|
|
89
|
+
"references": {}
|
|
90
|
+
},
|
|
91
|
+
"required": false,
|
|
92
|
+
"optional": false,
|
|
93
|
+
"docs": {
|
|
94
|
+
"tags": [],
|
|
95
|
+
"text": "Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\nValues: regular (default) | bold."
|
|
96
|
+
},
|
|
97
|
+
"attribute": "weight",
|
|
98
|
+
"reflect": true,
|
|
99
|
+
"defaultValue": "'regular'"
|
|
100
|
+
},
|
|
101
|
+
"spotColor": {
|
|
102
|
+
"type": "string",
|
|
103
|
+
"mutable": false,
|
|
104
|
+
"complexType": {
|
|
105
|
+
"original": "string",
|
|
106
|
+
"resolved": "string",
|
|
107
|
+
"references": {}
|
|
108
|
+
},
|
|
109
|
+
"required": false,
|
|
110
|
+
"optional": false,
|
|
111
|
+
"docs": {
|
|
112
|
+
"tags": [],
|
|
113
|
+
"text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
|
|
114
|
+
},
|
|
115
|
+
"attribute": "spot-color",
|
|
116
|
+
"reflect": true,
|
|
117
|
+
"defaultValue": "'accent-dark'"
|
|
118
|
+
},
|
|
119
|
+
"color": {
|
|
120
|
+
"type": "string",
|
|
121
|
+
"mutable": false,
|
|
122
|
+
"complexType": {
|
|
123
|
+
"original": "string",
|
|
124
|
+
"resolved": "string",
|
|
125
|
+
"references": {}
|
|
126
|
+
},
|
|
127
|
+
"required": false,
|
|
128
|
+
"optional": false,
|
|
129
|
+
"docs": {
|
|
130
|
+
"tags": [],
|
|
131
|
+
"text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
|
|
132
|
+
},
|
|
133
|
+
"attribute": "color",
|
|
134
|
+
"reflect": false
|
|
135
|
+
},
|
|
136
|
+
"marginBlock": {
|
|
137
|
+
"type": "string",
|
|
138
|
+
"mutable": false,
|
|
139
|
+
"complexType": {
|
|
140
|
+
"original": "string",
|
|
141
|
+
"resolved": "string",
|
|
142
|
+
"references": {}
|
|
143
|
+
},
|
|
144
|
+
"required": false,
|
|
145
|
+
"optional": false,
|
|
146
|
+
"docs": {
|
|
147
|
+
"tags": [],
|
|
148
|
+
"text": "CSS margin-block property values.\nDefault to 1.25em"
|
|
149
|
+
},
|
|
150
|
+
"attribute": "margin-block",
|
|
151
|
+
"reflect": true,
|
|
152
|
+
"defaultValue": "'0'"
|
|
153
|
+
},
|
|
154
|
+
"lineHeight": {
|
|
155
|
+
"type": "string",
|
|
156
|
+
"mutable": false,
|
|
157
|
+
"complexType": {
|
|
158
|
+
"original": "string",
|
|
159
|
+
"resolved": "string",
|
|
160
|
+
"references": {}
|
|
161
|
+
},
|
|
162
|
+
"required": false,
|
|
163
|
+
"optional": false,
|
|
164
|
+
"docs": {
|
|
165
|
+
"tags": [],
|
|
166
|
+
"text": "CSS line-height property values.\nDefault to 140%"
|
|
167
|
+
},
|
|
168
|
+
"attribute": "line-height",
|
|
169
|
+
"reflect": true,
|
|
170
|
+
"defaultValue": "'125%'"
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
static get states() {
|
|
175
|
+
return {
|
|
176
|
+
"styles": {}
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
static get elementRef() { return "host"; }
|
|
180
|
+
static get watchers() {
|
|
181
|
+
return [{
|
|
182
|
+
"propName": "color",
|
|
183
|
+
"methodName": "handleChangeColor"
|
|
184
|
+
}, {
|
|
185
|
+
"propName": "spotColor",
|
|
186
|
+
"methodName": "handleChangeColor"
|
|
187
|
+
}];
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
//# sourceMappingURL=cura-label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-label.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,SAAS;;IAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBAhD0C,QAAQ;kBAM3B,SAAS;qBAM1B,aAAa;;uBAiBX,GAAG;sBAMJ,MAAM;kBAYxB,EAAE;;EA1BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,UAAU;IACR,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,SAAS,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;EACJ,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;MAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;MACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;EACJ,CAAC;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;MACnC,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAC7C,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-label',\n styleUrl: 'cura-label.scss',\n shadow: true,\n})\nexport class CuraLabel {\n\n /**\n * Set size of body text.\n * Values: medium (default) | large | small | xsmall.\n */\n @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n /**\n * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) | bold.\n */\n @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '0';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '125%';\n\n /**\n * Host element <cura-label>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.getClasses()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s)
|
|
4
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import { getColorsWithDepths } from "../../../utils/utils";
|
|
14
|
+
const colors = getColorsWithDepths();
|
|
15
|
+
const renderCuraLabel = (label, args) => {
|
|
16
|
+
const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
|
|
17
|
+
cura-heading { ${args.cssMarginBlock ? `
|
|
18
|
+
--margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
|
|
19
|
+
--line-height: ${args.cssLineHeight} !important;` : ``}
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
|
|
23
|
+
` : '';
|
|
24
|
+
const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
|
|
25
|
+
size="${args.size}"` : ``}${args.weight ? `
|
|
26
|
+
weight="${args.weight}"` : ''}${args.color ? `
|
|
27
|
+
color="${args.color}"` : ''}${args.spotColor ? `
|
|
28
|
+
spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
|
|
29
|
+
margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
|
|
30
|
+
line-height="${args.lineHeight}"` : ''}>
|
|
31
|
+
${label}
|
|
32
|
+
</cura-label>
|
|
33
|
+
`;
|
|
34
|
+
return `${styles}${block}${block}${block}`;
|
|
35
|
+
};
|
|
36
|
+
export default {
|
|
37
|
+
title: 'Componentes/Forms/Label',
|
|
38
|
+
tags: ['autodocs'],
|
|
39
|
+
render: (_a) => {
|
|
40
|
+
var { label } = _a, args = __rest(_a, ["label"]);
|
|
41
|
+
return renderCuraLabel(label, args);
|
|
42
|
+
},
|
|
43
|
+
argTypes: {
|
|
44
|
+
label: {
|
|
45
|
+
control: 'text',
|
|
46
|
+
description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',
|
|
47
|
+
name: 'Content'
|
|
48
|
+
},
|
|
49
|
+
size: {
|
|
50
|
+
control: { type: 'select' },
|
|
51
|
+
options: ['xsmall', 'small', 'medium', 'large'],
|
|
52
|
+
description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',
|
|
53
|
+
table: {
|
|
54
|
+
category: 'Properties',
|
|
55
|
+
defaultValue: { summary: 'medium' }
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
weight: {
|
|
59
|
+
control: { type: 'inline-radio' },
|
|
60
|
+
options: ['regular', 'bold'],
|
|
61
|
+
description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',
|
|
62
|
+
table: {
|
|
63
|
+
category: 'Properties',
|
|
64
|
+
defaultValue: { summary: 'regular' }
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
color: {
|
|
68
|
+
control: { type: 'select' },
|
|
69
|
+
options: ['', ...colors],
|
|
70
|
+
description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
|
|
71
|
+
table: {
|
|
72
|
+
category: 'Properties',
|
|
73
|
+
defaultValue: { summary: 'Cor de texto padrão do tema' }
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
spotColor: {
|
|
77
|
+
control: { type: 'select' },
|
|
78
|
+
options: ['', ...colors],
|
|
79
|
+
description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',
|
|
80
|
+
name: 'spot-color',
|
|
81
|
+
table: {
|
|
82
|
+
category: 'Properties',
|
|
83
|
+
defaultValue: { summary: 'accent-dark' }
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
marginBlock: {
|
|
87
|
+
control: 'text',
|
|
88
|
+
description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
|
|
89
|
+
name: 'margin-block',
|
|
90
|
+
table: {
|
|
91
|
+
category: 'Properties',
|
|
92
|
+
defaultValue: { summary: '0' }
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
lineHeight: {
|
|
96
|
+
control: 'text',
|
|
97
|
+
description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
|
|
98
|
+
name: 'line-height',
|
|
99
|
+
table: {
|
|
100
|
+
category: 'Properties',
|
|
101
|
+
defaultValue: { summary: '125%' }
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
cssMarginBlock: {
|
|
105
|
+
control: 'text',
|
|
106
|
+
description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
|
|
107
|
+
name: '--margin-block',
|
|
108
|
+
table: {
|
|
109
|
+
category: 'CSS Properties',
|
|
110
|
+
defaultValue: { summary: '0' }
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
cssLineHeight: {
|
|
114
|
+
control: 'text',
|
|
115
|
+
description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
|
|
116
|
+
name: '--line-height',
|
|
117
|
+
table: {
|
|
118
|
+
category: 'CSS Properties',
|
|
119
|
+
defaultValue: { summary: '125%' }
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
};
|
|
124
|
+
export const Label = {
|
|
125
|
+
args: {
|
|
126
|
+
label: 'Dolor sit consectetur <a href="https://www.rededorsaoluiz.com.br" target="_blank">adipiscing</a> elit.',
|
|
127
|
+
size: 'medium',
|
|
128
|
+
weight: '',
|
|
129
|
+
color: '',
|
|
130
|
+
spotColor: '',
|
|
131
|
+
marginBlock: '',
|
|
132
|
+
lineHeight: '',
|
|
133
|
+
cssMarginBlock: '',
|
|
134
|
+
cssLineHeight: ''
|
|
135
|
+
},
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=cura-label.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cura-label.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraLabel = (label: string, args: any) => {\n const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n cura-heading { ${args.cssMarginBlock ? `\n --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n --line-height: ${args.cssLineHeight} !important;` : ``}\n }\n</style>\n\n` : '';\n const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n size=\"${args.size}\"` : ``}${args.weight ? `\n weight=\"${args.weight}\"` : ''}${args.color ? `\n color=\"${args.color}\"` : ''}${args.spotColor ? `\n spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n line-height=\"${args.lineHeight}\"` : ''}>\n ${label}\n</cura-label>\n`;\n return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n title: 'Componentes/Forms/Label',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n return renderCuraLabel(label, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',\n name: 'Content'\n },\n size: {\n control: { type: 'select' },\n options: ['xsmall', 'small', 'medium', 'large'],\n description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium'}\n }\n },\n weight: {\n control: { type: 'inline-radio' },\n options: ['regular', 'bold'],\n description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'regular'}\n }\n },\n color: {\n control: { type: 'select' },\n options: ['', ...colors],\n description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'Cor de texto padrão do tema'}\n }\n },\n spotColor: {\n control: { type: 'select' },\n options: ['', ...colors],\n description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n name: 'spot-color',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent-dark'}\n }\n },\n marginBlock: {\n control: 'text',\n description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n name: 'margin-block',\n table: {\n category: 'Properties',\n defaultValue: { summary: '0'}\n }\n },\n lineHeight: {\n control: 'text',\n description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n name: 'line-height',\n table: {\n category: 'Properties',\n defaultValue: { summary: '125%'}\n }\n },\n cssMarginBlock: {\n control: 'text',\n description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n name: '--margin-block',\n table: {\n category: 'CSS Properties',\n defaultValue: { summary: '0'}\n }\n },\n cssLineHeight: {\n control: 'text',\n description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n name: '--line-height',\n table: {\n category: 'CSS Properties',\n defaultValue: { summary: '125%'}\n }\n },\n },\n};\n\nexport const Label = {\n args: {\n label: 'Dolor sit consectetur <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">adipiscing</a> elit.',\n size: 'medium',\n weight: '',\n color: '',\n spotColor: '',\n marginBlock: '',\n lineHeight: '',\n cssMarginBlock: '',\n cssLineHeight: ''\n },\n};\n"]}
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { getColorsWithDepths } from "../../../utils/utils";
|
|
14
14
|
const colors = getColorsWithDepths();
|
|
15
15
|
export default {
|
|
16
|
-
title: '
|
|
16
|
+
title: 'Componentes/Loaders/Loader Circle',
|
|
17
17
|
tags: ['autodocs'],
|
|
18
18
|
render: (_a) => {
|
|
19
19
|
var { label } = _a, args = __rest(_a, ["label"]);
|
package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cura-loader-circle.stories.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"cura-loader-circle.stories.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,mCAAmC;EAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;sBACL,CAAC;EACrB,CAAC;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC;MAC/C,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,eAAe,EAAC;OAC1C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,IAAI,EAAE;IACJ,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;GACjB;CACF,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n title: 'Componentes/Loaders/Loader Circle',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n // You can either use a function to create DOM elements or use a plain html string!\n // return `<div>${label}</div>`;\n return `<cura-loader-circle\n name=\"${args.name}\"\n color=\"${args.color}\"\n size=\"${args.size}\"\n disabled=\"${args.disabled}\">\n</cura-loader-circle>`;\n },\n argTypes: {\n size: {\n control: { type: 'select' },\n options: ['small', 'medium', 'large', 'xlarge'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'medium'}\n }\n },\n color: {\n control: { type: 'select' },\n options: colors,\n description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'neutral-white'}\n }\n }\n },\n};\n\nexport const LoaderCircle = {\n args: {\n size: 'medium',\n color: 'primary'\n },\n};\n"]}
|