-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
300 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
packages/core/src/components/discord-action-row/discord-action-row.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .discord-action-row { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| } |
15 changes: 15 additions & 0 deletions
15
packages/core/src/components/discord-action-row/discord-action-row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Component, ComponentInterface, h, Host } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'discord-action-row', | ||
| styleUrl: 'discord-action-row.css' | ||
| }) | ||
| export class DiscordActionRow implements ComponentInterface { | ||
| public render() { | ||
| return ( | ||
| <Host class="discord-action-row"> | ||
| <slot></slot> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # discord-action-row | ||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
| --- | ||
|
|
||
| _Built with [StencilJS](https://stenciljs.com/)_ |
72 changes: 72 additions & 0 deletions
72
packages/core/src/components/discord-button/discord-button.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| .discord-button { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| margin: 4px 8px 4px 0; | ||
| padding: 2px 16px; | ||
| width: auto; | ||
| height: 32px; | ||
| min-width: 60px; | ||
| min-height: 32px; | ||
| -webkit-transition: background-color 0.17s ease, color 0.17s ease; | ||
| transition: background-color 0.17s ease, color 0.17s ease; | ||
| border-radius: 3px; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| line-height: 16px; | ||
| text-decoration: none !important; | ||
| } | ||
|
|
||
| .discord-button.discord-button-success { | ||
| color: #fff; | ||
| background-color: #3ba55d; | ||
| } | ||
|
|
||
| .discord-button.discord-button-success.discord-button-hoverable:hover { | ||
| background-color: #2d7d46; | ||
| } | ||
|
|
||
| .discord-button.discord-button-destructive { | ||
| color: #fff; | ||
| background-color: #ed4245; | ||
| } | ||
|
|
||
| .discord-button.discord-button-destructive.discord-button-hoverable:hover { | ||
| background-color: #c03537; | ||
| } | ||
|
|
||
| .discord-button.discord-button-primary { | ||
| color: #fff; | ||
| background-color: #5865f2; | ||
| } | ||
|
|
||
| .discord-button.discord-button-primary.discord-button-hoverable:hover { | ||
| background-color: #4752c4; | ||
| } | ||
|
|
||
| .discord-button.discord-button-secondary { | ||
| color: #fff; | ||
| background-color: #4f545c; | ||
| } | ||
|
|
||
| .discord-button.discord-button-secondary.discord-button-hoverable:hover { | ||
| background-color: #5d6269; | ||
| } | ||
|
|
||
| .discord-button.discord-button-disabled { | ||
| cursor: not-allowed; | ||
| opacity: 0.5; | ||
| } | ||
|
|
||
| .discord-button .discord-button-launch { | ||
| margin-left: 8px; | ||
| } | ||
|
|
||
| .discord-button .discord-button-emoji { | ||
| margin-right: 4px; | ||
| object-fit: contain; | ||
| width: 1.375em; | ||
| height: 1.375em; | ||
| vertical-align: bottom; | ||
| } |
81 changes: 81 additions & 0 deletions
81
packages/core/src/components/discord-button/discord-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { Component, ComponentInterface, Element, h, Host, Prop, Watch } from '@stencil/core'; | ||
| import Fragment from '../../Fragment'; | ||
| import LaunchIcon from '../svgs/launch-icon'; | ||
|
|
||
| @Component({ | ||
| tag: 'discord-button', | ||
| styleUrl: 'discord-button.css' | ||
| }) | ||
| export class DiscordButton implements ComponentInterface { | ||
| /** | ||
| * The DiscordButton element. | ||
| */ | ||
| @Element() | ||
| public el: HTMLElement; | ||
|
|
||
| /** | ||
| * The emoji URL to use in the button. | ||
| */ | ||
| @Prop() | ||
| public emoji: string; | ||
|
|
||
| /** | ||
| * The name of the emoji used in the button. | ||
| */ | ||
| @Prop() | ||
| public emojiName = 'emoji'; | ||
|
|
||
| /** | ||
| * The URL for the button. Setting this will force the button type to be `secondary`. | ||
| */ | ||
| @Prop() | ||
| public url: string; | ||
|
|
||
| /** | ||
| * Whether to show the button as disabled. | ||
| */ | ||
| @Prop() | ||
| public disabled = false; | ||
|
|
||
| /** | ||
| * The type of button this is, this will change the color of the button. | ||
| * Valid values: `primary`, `secondary`, `success`, `destructive`. | ||
| */ | ||
| @Prop() | ||
| public type: 'primary' | 'secondary' | 'success' | 'destructive' = 'secondary'; | ||
|
|
||
| @Watch('type') | ||
| public handleType(value: string) { | ||
| if (typeof value !== 'string') { | ||
| throw new TypeError('DiscordButton `type` prop must be a string.'); | ||
| } else if (!['primary', 'secondary', 'success', 'destructive'].includes(value)) { | ||
| throw new RangeError("DiscordButton `type` prop must be one of: 'primary', 'secondary', 'success', 'destructive'"); | ||
| } | ||
| } | ||
|
|
||
| public render() { | ||
| const parent: HTMLDiscordActionRowElement = this.el.parentElement as HTMLDiscordActionRowElement; | ||
|
|
||
| if (parent.tagName.toLowerCase() !== 'discord-action-row') { | ||
| throw new Error('All <discord-button> components must be direct children of <discord-action-row>.'); | ||
| } | ||
|
|
||
| const content = ( | ||
| <Fragment> | ||
| {this.emoji && <img src={this.emoji} alt={this.emojiName} draggable={false} class="discord-button-emoji" />} | ||
| <span> | ||
| <slot /> | ||
| </span> | ||
| {this.url && <LaunchIcon class="discord-button-launch" />} | ||
| </Fragment> | ||
| ); | ||
|
|
||
| return this.url && !this.disabled ? ( | ||
| <a class="discord-button discord-button-secondary" href={this.url} target="_blank" rel="noopener noreferrer"> | ||
| {content} | ||
| </a> | ||
| ) : ( | ||
| <Host class={`discord-button discord-button-${this.type} discord-button-${this.disabled ? 'disabled' : 'hoverable'}`}>{content}</Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| # discord-button | ||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------- | | ||
| | `disabled` | `disabled` | Whether to show the button as disabled. | `boolean` | `false` | | ||
| | `emoji` | `emoji` | The emoji URL to use in the button. | `string` | `undefined` | | ||
| | `emojiName` | `emoji-name` | The name of the emoji used in the button. | `string` | `'emoji'` | | ||
| | `type` | `type` | The type of button this is, this will change the color of the button. Valid values: `primary`, `secondary`, `success`, `destructive`. | `"destructive" \| "primary" \| "secondary" \| "success"` | `'secondary'` | | ||
| | `url` | `url` | The URL for the button. Setting this will force the button type to be `secondary`. | `string` | `undefined` | | ||
|
|
||
| --- | ||
|
|
||
| _Built with [StencilJS](https://stenciljs.com/)_ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { h } from '@stencil/core'; | ||
|
|
||
| export default function LaunchIcon<T>(props: T) { | ||
| return ( | ||
| <svg {...props} aria-hidden="false" width="16" height="16" viewBox="0 0 24 24"> | ||
| <path | ||
| fill="currentColor" | ||
| d="M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z" | ||
| /> | ||
| <path fill="currentColor" d="M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z" /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters