Skip to content

Commit

Permalink
feat: implemented sharing via link
Browse files Browse the repository at this point in the history
  • Loading branch information
Shirley Li authored and Shirley Li committed Jul 29, 2024
1 parent 35f1ed0 commit 901c303
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 97 deletions.
124 changes: 49 additions & 75 deletions docs/token-diff/src/CompareCard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { html, css, LitElement, TemplateResult } from 'lit';
import { html, css, LitElement, TemplateResult, PropertyValueMap } from 'lit';
import '@spectrum-web-components/action-group/sp-action-group.js';
import '@spectrum-web-components/action-button/sp-action-button.js';
import '@spectrum-web-components/picker/sp-picker.js';
Expand Down Expand Up @@ -110,11 +110,25 @@ export class CompareCard extends LitElement {
schema: { type: String },
};

constructor(heading: string) {
constructor(
heading: string,
branchOrTag: string,
schema: string,
toggle: string,
branchOptions: string[],
tagOptions: string[],
branchSchemaOptions: string[],
tagSchemaOptions: string[],
) {
super();
this.heading = heading;
this.__fetchBranchTagOptions('Github branch');
this.__fetchBranchTagOptions('Package release');
this.branchOrTag = branchOrTag;
this.schema = schema;
this.toggle = toggle;
this.branchOptions = branchOptions;
this.tagOptions = tagOptions;
this.branchSchemaOptions = branchSchemaOptions;
this.tagSchemaOptions = tagSchemaOptions;
}

__setGithubBranchToggle() {
Expand All @@ -129,56 +143,6 @@ export class CompareCard extends LitElement {
this.__handleSelection(this.tagSchemaOptions[0]);
}

async __fetchBranchTagOptions(type: string) {
let oldOptions: string[] = [];
if (type === 'Github branch') {
oldOptions = this.branchOptions;
this.branchOptions = [];
const url = 'https://api.github.com/repos/adobe/spectrum-tokens/branches';
await fetch(url, {
method: 'GET',
headers: {
Authorization: `token ${githubAPIKey}`,
},
}).then(async response => {
const branches = await response.json();
this.__updateOptions(branches, this.branchOptions, oldOptions);
});
} else {
oldOptions = this.tagOptions;
this.tagOptions = [];
const url = 'https://api.github.com/repos/adobe/spectrum-tokens/tags';
await fetch(url, {
method: 'GET',
headers: {
Authorization: `token ${githubAPIKey}`,
},
}).then(async response => {
const tags = await response.json();
this.__updateOptions(tags, this.tagOptions, oldOptions);
});
}
await this.__fetchSchemaOptions();
this.__handleSelection(this.branchOrTag);
this.__handleSelection(this.schema);
}

async __fetchSchemaOptions() {
const source = 'https://raw.githubusercontent.com/adobe/spectrum-tokens/';
const url =
this.toggle !== 'Github branch'
? source + '%40adobe/spectrum-tokens%40' + this.branchOrTag
: source + this.branchOrTag;
this.branchSchemaOptions = await this.__fetchTokens('manifest.json', url);
this.branchSchemaOptions.unshift('all');
this.tagSchemaOptions = await this.__fetchTokens('manifest.json', url);
this.tagSchemaOptions.unshift('all');
}

async __fetchTokens(tokenName: string, url: string) {
return (await fetch(`${url}/packages/tokens/${tokenName}`)).json();
}

__updateOptions(
jsonObject: Branch | Tag,
branchOrTagArr: string[],
Expand Down Expand Up @@ -246,9 +210,25 @@ export class CompareCard extends LitElement {
this.dispatchEvent(new CustomEvent('selection', options));
}

@property({ type: String }) heading = 'Version A';
firstUpdated() {
if (this.toggle === 'Github branch') {
const branchToggle = this.shadowRoot?.getElementById('branch-toggle');
if (branchToggle) {
branchToggle.setAttribute('selected', '');
this.__setGithubBranchToggle();
}
} else {
const tagToggle = this.shadowRoot?.getElementById('tag-toggle');
if (tagToggle) {
tagToggle.setAttribute('selected', '');
this.__setReleaseToggle();
}
}
}

@property({ type: String }) toggle = 'Github branch';
@property({ type: String }) heading = '';

@property({ type: String }) toggle = '';

@property({ type: Array }) branchOptions: string[] = [];

Expand All @@ -258,9 +238,11 @@ export class CompareCard extends LitElement {

@property({ type: Array }) tagSchemaOptions: string[] = [];

@property({ type: String }) branchOrTag = 'beta';
@property({ type: String }) branchOrTag = '';

@property({ type: String }) schema = '';

@property({ type: String }) schema = 'all';
@property({ type: String }) branchOrTagKey = '';

protected override render(): TemplateResult {
return html`
Expand All @@ -271,23 +253,23 @@ export class CompareCard extends LitElement {
<sp-action-group compact selects="single" class="section">
<sp-action-button
toggles
selected
@click=${this.__setGithubBranchToggle}
id="branch-toggle"
>
Github branch
</sp-action-button>
<sp-action-button toggles @click=${this.__setReleaseToggle}>
<sp-action-button
toggles
@click=${this.__setReleaseToggle}
id="tag-toggle"
>
Package release
</sp-action-button>
</sp-action-group>
<sp-picker
class="picker section"
label=${this.toggle === 'Github branch'
? this.branchOptions[0]
: this.tagOptions[0]}
value=${this.toggle === 'Github branch'
? this.branchOptions[0]
: this.tagOptions[0]}
label=${this.branchOrTag}
value=${this.branchOrTag}
>
${this.toggle === 'Github branch'
? this.__createMenuItem(this.branchOptions, true)
Expand All @@ -296,15 +278,7 @@ export class CompareCard extends LitElement {
<sp-field-label for="schemaSelection" size="m"
>Schema</sp-field-label
>
<sp-picker
class="picker"
label=${this.toggle === 'Github branch'
? this.branchSchemaOptions[0]
: this.tagSchemaOptions[0]}
value=${this.toggle === 'Github branch'
? this.branchSchemaOptions[0]
: this.tagSchemaOptions[0]}
>
<sp-picker class="picker" label=${this.schema} value=${this.schema}>
${this.toggle === 'Github branch'
? this.__createMenuItem(this.branchSchemaOptions, false)
: this.__createMenuItem(this.tagSchemaOptions, false)}
Expand Down
9 changes: 2 additions & 7 deletions docs/token-diff/src/DiffReport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { html, css, LitElement, TemplateResult, noChange } from 'lit';
import { html, css, LitElement, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
Expand Down Expand Up @@ -143,11 +143,6 @@ export class DiffReport extends LitElement {
Object.keys(this.tokenDiffJSON.updated.deleted).length +
Object.keys(this.tokenDiffJSON.updated.updated).length +
Object.keys(this.tokenDiffJSON.updated.renamed).length;
// let queryString = this.url; // window.location.search
// let objectString = queryString.split('=')[1];
// let decodedObject = JSON.parse(decodeURIComponent(objectString));

// console.log(decodedObject); // { name: 'John', age: 30 }
}

@property() tokenDiffJSON: any = {
Expand Down Expand Up @@ -263,7 +258,7 @@ export class DiffReport extends LitElement {
<sp-theme theme="spectrum" color="light" scale="medium">
<sp-overlay trigger="trigger@click" type="auto">
<sp-toast open variant="info">
The report url has been copied to your clipboard!
The report contents have been copied to your clipboard!
</sp-toast>
</sp-overlay>
<div class="share-header">
Expand Down
15 changes: 2 additions & 13 deletions docs/token-diff/src/PageContainer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/overlay/sp-overlay.js';
import '@spectrum-web-components/popover/sp-popover.js';
import '@spectrum-web-components/divider/sp-divider.js';
import { property } from 'lit/decorators.js';

export class PageContainer extends LitElement {
static styles = css`
Expand Down Expand Up @@ -138,21 +137,11 @@ export class PageContainer extends LitElement {
firstUpdated() {
const router = new Router(this.shadowRoot!.querySelector('#outlet'));
router.setRoutes([
// { path: `/demo/`, component: 'token-diff' },
{ path: `/demo/:object?`, component: 'token-diff' },
{ path: `/demo:object?`, component: 'token-diff' },
{ path: '/getting-started', component: 'getting-started' },
]);
}

@property({ type: String }) url = '/demo/';

__reportListener(e: CustomEvent) {
// console.log("did it go off?");
this.url = e.detail;
// this.router.setParameter()
console.log(this.url);
}

protected override render(): TemplateResult {
return html`
<div>
Expand Down Expand Up @@ -187,7 +176,7 @@ export class PageContainer extends LitElement {
</sp-popover>
</sp-overlay>
<div class="right">
<div @urlChange=${this.__reportListener} id="outlet"></div>
<div id="outlet"></div>
<sp-divider class="divider" size="m"></sp-divider>
<footer>
<ul class="footer-group">
Expand Down
Loading

0 comments on commit 901c303

Please sign in to comment.