8000 Modal component by lucasreichert3 · Pull Request #32 · SeniorSA/tecnologia-webcomponents · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Modal component #32

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

Merged
merged 11 commits into from
Mar 30, 2021
Merged

Modal component #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2539c48
modal
lucasreichert3 Mar 26, 2021
32d288a
Merge branch 'develop' of https://github.com/SeniorSA/tecnologia-webc…
lucasreichert3 Mar 26, 2021
f9d6938
changelog
lucasreichert3 Mar 26, 2021
af7d46f
Merge branch 'develop' of https://github.com/SeniorSA/tecnologia-webc…
lucasreichert3 Mar 26, 2021
80092d2
Merge branch 'develop' of https://github.com/SeniorSA/tecnologia-webc…
lucasreichert3 Mar 29, 2021
370997d
pr changes
lucasreichert3 Mar 29, 2021
929faab
Update CHANGELOG.md
lucasreichert3 Mar 29, 2021
58aeda5
Update CHANGELOG.md
lucasreichert3 Mar 29, 2021
c5ae9d7
changes
lucasreichert3 Mar 29, 2021
97937e7
Merge branch 'feature/modal' of https://github.com/SeniorSA/tecnologi…
lucasreichert3 Mar 29, 2021
ac49959
pr changes
lucasreichert3 Mar 30, 2021
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
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
# Release notes

## Unreleased

### Features

- Created `modal` component.

### Fixes

- Set `reflect: true` on button component.

## 0.4.1

### Fixes
Expand Down
19,610 changes: 86 additions & 19,524 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"storybook:build": "npm run test && build-storybook -s dist"
},
"dependencies": {
"@seniorsistemas/tecnologia-design-tokens": "^0.2.1",
"@seniorsistemas/tecnologia-design-tokens": "^0.3.0",
"@stencil/core": "^2.5.1",
"@storybook/cli": "^6.1.21"
},
Expand Down
35 changes: 35 additions & 0 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { TecnologiaTheme } from "./components/interfaces";
import { ButtonPosition } from "./components/bottom-bar/bottom-bar.model";
import { TecStatus } from "./models/status.model";
import { TecButtonColor, TecButtonIconMode, TecButtonMode, TecButtonSize } from "./components/tec-button/tec-button.model";
import { TecSize } from "./models/size.model";
export namespace Components {
interface TecBottomBar {
"buttonPosition": ButtonPosition;
Expand Down Expand Up @@ -64,6 +65,18 @@ export namespace Components {
"status": TecStatus;
"theme": TecnologiaTheme;
}
interface TecModal {
"blockBodyScroll": boolean;
"closeOnEscape": boolean;
"dismissOnBackdrop": boolean;
"fullWidth": boolean;
"modalTitle": string;
"opened": boolean;
"responsive": boolean;
"showCloseIcon": boolean;
"size": TecSize;
"theme": TecnologiaTheme;
}
interface TecProductHeader {
/**
* Use to make a bar fixed on top
Expand Down Expand Up @@ -96,6 +109,12 @@ declare global {
prototype: HTMLTecButtonElement;
new (): HTMLTecButtonElement;
};
interface HTMLTecModalElement extends Components.TecModal, HTMLStencilElement {
}
var HTMLTecModalElement: {
prototype: HTMLTecModalElement;
new (): HTMLTecModalElement;
};
interface HTMLTecProductHeaderElement extends Components.TecProductHeader, HTMLStencilElement {
}
var HTMLTecProductHeaderElement: {
Expand All @@ -105,6 +124,7 @@ declare global {
interface HTMLElementTagNameMap {
"tec-bottom-bar": HTMLTecBottomBarElement;
"tec-button": HTMLTecButtonElement;
"tec-modal": HTMLTecModalElement;
"tec-product-header": HTMLTecProductHeaderElement;
}
}
Expand Down Expand Up @@ -167,6 +187,19 @@ declare namespace LocalJSX {
"status"?: TecStatus;
"theme"?: TecnologiaTheme;
}
interface TecModal {
"blockBodyScroll"?: boolean;
"closeOnEscape"?: boolean;
"dismissOnBackdrop"?: boolean;
"fullWidth"?: boolean;
"modalTitle"?: string;
"onHidden"?: (event: CustomEvent<UIEvent>) => void;
"opened"?: boolean;
"responsive"?: boolean;
"showCloseIcon"?: boolean;
"size"?: TecSize;
"theme"?: TecnologiaTheme;
}
interface TecProductHeader {
/**
* Emitted when the title was clicked
Expand All @@ -193,6 +226,7 @@ declare namespace LocalJSX {
interface IntrinsicElements {
"tec-bottom-bar": TecBottomBar;
"tec-button": TecButton;
"tec-modal": TecModal;
"tec-product-header": TecProductHeader;
}
}
Expand All @@ -202,6 +236,7 @@ declare module "@stencil/core" {
interface IntrinsicElements {
"tec-bottom-bar": LocalJSX.TecBottomBar & JSXBase.HTMLAttributes<HTMLTecBottomBarElement>;
"tec-button": LocalJSX.TecButton & JSXBase.HTMLAttributes<HTMLTecButtonElement>;
"tec-modal": LocalJSX.TecModal & JSXBase.HTMLAttributes<HTMLTecModalElement>;
"tec-product-header": LocalJSX.TecProductHeader & JSXBase.HTMLAttributes<HTMLTecProductHeaderElement>;
}
}
Expand Down
30 changes: 15 additions & 15 deletions src/components/tec-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| `buttonId` | `buttonid` | Optional ID to be attached on button | `string` | `undefined` |
| `color` | `color` | Colors of button (like gradient) | `TecButtonColor.basic \| TecButtonColor.gradient \| TecButtonColor.outline \| TecButtonColor.solid` | `TecButtonColor.solid` |
| `disabled` | `disabled` | Boolean to indicate if button is disabled | `boolean` | `false` |
| `fullWidth` | `fullwidth` | If `true` button use `width: 100%` | `boolean` | `false` |
| `icon` | `icon` | Icon class from FontAwesome 5 Free Allows to use: brands, regular, solid Example: 'far fa-paper-plane' | `string` | `undefined` |
| `iconMode` | `iconmode` | Position of icon | `TecButtonIconMode.left \| TecButtonIconMode.right` | `TecButtonIconMode.left` |
| `label` _(required)_ | `label` | Text to show inside button | `string` | `undefined` |
| `loading` | `loading` | | `boolean` | `false` |
| `mode` | `mode` | Mode of button (like square or rounded) | `TecButtonMode.radius \| TecButtonMode.rounded \| TecButtonMode.square` | `TecButtonMode.rounded` |
| `onlyIcon` | `onlyicon` | If `true` button removes label | `boolean` | `false` |
| `size` | `size` | Size of button | `TecButtonSize.giant \| TecButtonSize.large \| TecButtonSize.medium \| TecButtonSize.small \| TecButtonSize.tiny` | `TecButtonSize.small` |
| `status` | `status` | The status of button (color) | `TecStatus.danger \| TecStatus.info \| TecStatus.primary \| TecStatus.secondary \| TecStatus.success \| TecStatus.warn` | `TecStatus.primary` |
| `theme` | `theme` | | `TecnologiaTheme.dark \| TecnologiaTheme.light` | `defaultTheme` |
| Property | Attribute | Description | Type | Default |
| -------------------- | ------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| `buttonId` | `buttonid` | Optional ID to be attached on button | `string` | `undefined` |
| `color` | `color` | Colors of button (like gradient) | `TecButtonColor.basic \| TecButtonColor.gradient \| TecButtonColor.outline \| TecButtonColor.solid` | `TecButtonColor.solid` |
| `disabled` | `disabled` | Boolean to indicate if button is disabled | `boolean` | `false` |
| `fullWidth` | `full-width` | If `true` button use `width: 100%` | `boolean` | `false` |
| `icon` | `icon` | Icon class from FontAwesome 5 Free Allows to use: brands, regular, solid Example: 'far fa-paper-plane' | `string` | `undefined` |
| `iconMode` | `iconmode` | Position of icon | `TecButtonIconMode.left \| TecButtonIconMode.right` | `TecButtonIconMode.left` |
| `label` _(required)_ | `label` | Text to show inside button | `string` | `undefined` |
| `loading` | `loading` | | `boolean` | `false` |
| `mode` | `mode` | Mode of button (like square or rounded) | `TecButtonMode.radius \| TecButtonMode.rounded \| TecButtonMode.square` | `TecButtonMode.rounded` |
| `onlyIcon` | `onlyicon` | If `true` button removes label | `boolean` | `false` |
| `size` | `size` | Size of button | `TecButtonSize.giant \| TecButtonSize.large \| TecButtonSize.medium \| TecButtonSize.small \| TecButtonSize.tiny` | `TecButtonSize.small` |
| `status` | `status` | The status of button (color) | `TecStatus.danger \| TecStatus.info \| TecStatus.primary \| TecStatus.secondary \| TecStatus.success \| TecStatus.warn` | `TecStatus.primary` |
| `theme` | `theme` | | `TecnologiaTheme.dark \| TecnologiaTheme.light` | `defaultTheme` |


## Events
Expand Down
2 changes: 1 addition & 1 deletion src/components/tec-button/tec-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export class TecButton {
/**
* If `true` button use `width: 100%`
*/
@Prop({ attribute: 'fullWidth' })
@Prop({ reflect: true })
fullWidth = false;

/**
Expand Down
6 changes: 3 additions & 3 deletions src/components/tec-button/test/tec-button.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ describe('tec-button', () => {
`);
});

it('renders with fullWidth', async () => {
it('renders with full-width', async () => {
const page = await newSpecPage({
components: [TecButton],
html: `<tec-button buttonId="1" label="Confirm" size="small" mode="rounded" fullWidth="true"></tec-button>`,
html: `<tec-button buttonId="1" label="Confirm" size="small" mode="rounded" full-width="true"></tec-button>`,
});
expect(page.root).toEqualHtml(`
<tec-button buttonid="1" label="Confirm" mode="rounded" size="small" theme="light" fullWidth="true">
<tec-button buttonid="1" label="Confirm" mode="rounded" size="small" theme="light" full-width="">
<mock:shadow-root>
<button type="button" id="1" class="responsive solid rounded primary text-sans text-base"><span class="">Confirm</span></button>
</mock:shadow-root>
Expand Down
33 changes: 33 additions & 0 deletions src/components/tec-modal/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# tec-modal



<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | --------------------- | ----------- | ----------------------------------------------------------------------------------- | --------------- |
| `blockBodyScroll` | `block-body-scroll` | | `boolean` | `true` |
| `closeOnEscape` | `close-on-escape` | | `boolean` | `true` |
| `dismissOnBackdrop` | `dismiss-on-backdrop` | | `boolean` | `true` |
| `fullWidth` | `full-width` | | `boolean` | `false` |
| `modalTitle` | `modal-title` | | `string` | `undefined` |
| `opened` | `opened` | | `boolean` | `false` |
| `responsive` | `responsive` | | `boolean` | `true` |
| `showCloseIcon` | `show-close-icon` | | `boolean` | `true` |
| `size` | `size` | | `TecSize.giant \| TecSize.large \| TecSize.medium \| TecSize.small \| TecSize.tiny` | `TecSize.small` |
| `theme` | `theme` | | `TecnologiaTheme.dark \| TecnologiaTheme.light` | `defaultTheme` |


## Events

| Event | Description | Type |
| -------- | ----------- | ---------------------- |
| `hidden` | | `CustomEvent<UIEvent>` |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
Loading
0