Skip to content

Commit

Permalink
Merge pull request #191 from Esri/rslibed/instant-apps-landing-page
Browse files Browse the repository at this point in the history 
feat: Added option to specify icon image scale. Exposed CSS variable for icon image scale to have finer control.
  • Loading branch information
@rslibed
rslibed authored Jul 26, 2023
2 parents f20bb6b + eb96e8e commit e6f8ca8
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/instant-apps-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"homepage": "https://esri.github.io/instant-apps-components",
"name": "@esri/instant-apps-components",
"version": "1.0.0-beta.105",
"version": "1.0.0-beta.106",
"description": "Reusable ArcGIS Instant Apps web components.",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
Expand Down
8 changes: 8 additions & 0 deletions packages/instant-apps-components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,10 @@ export namespace Components {
* Alternate text for `iconImage`.
*/
"iconImageAltText": string;
/**
* Scale of icon image/graphic.
*/
"iconImageScale": 's' | 'm' | 'l';
/**
* Controls the open/close state of the landing page.
*/
Expand Down Expand Up @@ -1078,6 +1082,10 @@ declare namespace LocalJSX {
* Alternate text for `iconImage`.
*/
"iconImageAltText"?: string;
/**
* Scale of icon image/graphic.
*/
"iconImageScale"?: 's' | 'm' | 'l';
/**
* Controls the open/close state of the landing page.
*/
Expand Down
20 changes: 19 additions & 1 deletion ...t-apps-components/src/components/instant-apps-landing-page/instant-apps-landing-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,19 @@
* @prop --instant-apps-landing-page-title-text-font-size: Font size of title text.
* @prop --instant-apps-landing-page-subtitle-text-font-size: Font size of subtitle text.
* @prop --instant-apps-landing-page-description-text-font-size: Font size of description text.
* @prop --instant-apps-landing-page-icon-image-scale--s: Icon image width when scale is set to 's'. Default value is 100px.
* @prop --instant-apps-landing-page-icon-image-scale--m: Icon image width when scale is set to 'm'. Default value is 250px.
* @prop --instant-apps-landing-page-icon-image-scale--l: Icon image width when scale is set to 'l'. Default value is 500px.
*/
--instant-apps-landing-page-background-color: var(--calcite-ui-brand);
--instant-apps-landing-page-text-color: var(--calcite-ui-text-inverse);
--instant-apps-landing-page-entry-button-color: var(--calcite-ui-brand);
--instant-apps-landing-page-title-text-font-size: var(--calcite-font-size-6);
--instant-apps-landing-page-subtitle-text-font-size: var(--calcite-font-size-3);
--instant-apps-landing-page-description-text-font-size: var(--calcite-font-size-0);
--instant-apps-landing-page-icon-image-scale--s: 100px;
--instant-apps-landing-page-icon-image-scale--m: 250px;
--instant-apps-landing-page-icon-image-scale--l: 500px;

.instant-apps-landing-page {
box-sizing: border-box;
Expand Down Expand Up @@ -54,7 +60,19 @@

&__icon-image {
margin-bottom: 5px;
max-width: 100%;
max-width: 50%;
}

&__icon-image-scale--s {
width: 100px;
}

&__icon-image-scale--m {
width: 250px;
}

&__icon-image-scale--l {
width: 500px;
}

&__button-container {
Expand Down
19 changes: 18 additions & 1 deletion ...nt-apps-components/src/components/instant-apps-landing-page/instant-apps-landing-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ const CSS = {
entryButton: 'instant-apps-landing-page__entry-button',
contentContainer: 'instant-apps-landing-page__content-container',
buttonContainer: 'instant-apps-landing-page__button-container',
iconImageScale: {
s: ' instant-apps-landing-page__icon-image-scale--s',
m: ' instant-apps-landing-page__icon-image-scale--m',
l: ' instant-apps-landing-page__icon-image-scale--l',
},
};

@Component({
Expand Down Expand Up @@ -54,6 +59,12 @@ export class InstantAppsLandingPage {
@Prop()
iconImage: string;

/**
* Scale of icon image/graphic.
*/
@Prop()
iconImageScale: 's' | 'm' | 'l' = 'm';

/**
* Alternate text for `iconImage`.
*/
Expand Down Expand Up @@ -128,7 +139,7 @@ export class InstantAppsLandingPage {
}

renderIconImage(): HTMLImageElement | null {
return this.iconImage ? <img class={CSS.iconImage} src={this.iconImage} alt={this.iconImageAltText} /> : null;
return this.iconImage ? <img class={`${CSS.iconImage}${this.getIconImageScale()}`} src={this.iconImage} alt={this.iconImageAltText} /> : null;
}

renderTitleText(): HTMLHeadingElement {
Expand All @@ -155,4 +166,10 @@ export class InstantAppsLandingPage {
const [x, y] = this.alignment;
return ` ${CSS.alignment}${x}-${y}`;
}

getIconImageScale(): string {
const { iconImageScale } = this;
const { s, m, l } = CSS.iconImageScale;
return iconImageScale === 'l' ? l : iconImageScale === 's' ? s : m;
}
}
6 changes: 5 additions & 1 deletion ...ages/instant-apps-components/src/components/instant-apps-landing-page/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
| `entryButtonText` | `entry-button-text` | Button text which closes/dismisses the landing page. | `string` | `undefined` |
| `iconImage` | `icon-image` | Image/graphic that is positioned near the text content. | `string` | `undefined` |
| `iconImageAltText` | `icon-image-alt-text` | Alternate text for `iconImage`. | `string` | `undefined` |
| `iconImageScale` | `icon-image-scale` | Scale of icon image/graphic. | `"l" \| "m" \| "s"` | `'m'` |
| `open` | `open` | Controls the open/close state of the landing page. | `boolean` | `true` |
| `subtitleText` | `subtitle-text` | Subtitle text. | `string` | `undefined` |
| `titleText` _(required)_ | `title-text` | Title text. | `string` | `undefined` |
Expand All @@ -28,7 +29,10 @@
| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `--instant-apps-landing-page-background-color` | Brand color of landing page that affects the background (if a backgound image is not set) and entry button colors |
| `--instant-apps-landing-page-description-text-font-size` | Font size of description text. |
| `--instant-apps-landing-page-entry-button-color` | Brand color of entry button. |
| `--instant-apps-landing-page-entry-button-color` | Brand color of the entry button. |
| `--instant-apps-landing-page-icon-image-scale--l` | Icon image width when scale is set to 'l'. Default value is 500px. |
| `--instant-apps-landing-page-icon-image-scale--m` | Icon image width when scale is set to 'm'. Default value is 250px. |
| `--instant-apps-landing-page-icon-image-scale--s` | Icon image width when scale is set to 's'. Default value is 100px. |
| `--instant-apps-landing-page-subtitle-text-font-size` | Font size of subtitle text. |
| `--instant-apps-landing-page-text-color` | Text color of landing page. |
| `--instant-apps-landing-page-title-text-font-size` | Font size of title text. |
Expand Down
1 change: 1 addition & 0 deletions packages/instant-apps-components/src/instant-apps-landing-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
description-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto blanditiis nesciunt voluptates dignissimos dolorem, aperiam necessitatibus. Deserunt velit eum labore."
entry-button-text="Get started"
icon-image="https://www.esri.com/content/dam/esrisites/en-us/arcgis/products/arcgis-instant-apps/assets/instant-apps-banner-fg.png"
icon-image-scale="l"
>
<a href="https://www.esri.com/en-us/arcgis/products/arcgis-instant-apps/overview" slot="secondary-action" target="_blank">
<calcite-button id="secondary">Learn more</calcite-button>
Expand Down

0 comments on commit e6f8ca8

Please sign in to comment.