Skip to content

API Summary Style Customization #17

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 10 commits into from
Apr 19, 2021
Merged

API Summary Style Customization #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46dbb7e
Refactor styles, add variable to adjust heading color (#14)
deiteris Mar 18, 2021
2d8c98e
add css parts
benri Mar 16, 2021
3fba682
part: separator, toc, api-title-label
benri Mar 18, 2021
d79ab61
hide toc
benri Mar 19, 2021
72d9090
update unit tests
benri Mar 22, 2021
67db3a0
margin var
benri Mar 23, 2021
13cb835
update type def
benri Mar 23, 2021
2c5a533
update doc
benri Mar 24, 2021
543b711
Merge branch 'master' into bl/style-extend
benri Apr 13, 2021
74faf23
bump version
benri Apr 15, 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
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,35 @@ npm install --save @api-components/api-summary
</html>
```

### Styling using CSS Shadow Parts

```html
<html>
<head>
<script type="module">
import '@api-components/api-summary/api-summary.js';
</script>
<style type="text/css">
api-summary::part(api-title) {
font-size: 24px;
}
</style>
</head>
<body>
<api-summary exportparts="api-title"></api-summary>
<script>
const amf = await getAmfModel();
document.body.querySelector('api-summary').api = amf;
window.addEventListener('api-navigation-selection-changed', (e) => {
console.log(e.detail.selected);
console.log(e.detail.type);
});
</script>
</body>
</html>
```
For a complete list of parts, check out this [doc](./Styling.md).

### In a LitElement template

```js
Expand Down
13 changes: 13 additions & 0 deletions Styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Styling

## List of CSS Shadow Parts

- `api-title`
- `api-title-label`
- `api-version`
- `marked-description`
- `info-section`
- `info-inline-desc`
- `license-section`
- `separator`
- `toc`
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@api-components/api-summary",
"description": "A summary view for an API base on AMF data model",
"version": "4.5.0",
"version": "4.6.0",
"license": "Apache-2.0",
"main": "index.js",
"module": "index.js",
Expand Down
4 changes: 4 additions & 0 deletions src/ApiSummary.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export declare class ApiSummary extends AmfHelperMixin(LitElement) {
* @attribute
*/
titleLevel: string;
/**
* A property to hide the table of contents list of endpoints.
*/
hideToc: boolean;

_providerName: string;
_providerEmail: string;
Expand Down
27 changes: 16 additions & 11 deletions src/ApiSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
* @default 2
*/
titleLevel: { type: String },
/**
* A property to hide the table of contents list of endpoints.
*/
hideToc: { type: Boolean },

_providerName: { type: String },
_providerEmail: { type: String },
Expand Down Expand Up @@ -99,6 +103,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
* @type {string[]}
*/
this.protocols = undefined;
this.hideToc = false;
}

__amfChanged() {
Expand Down Expand Up @@ -321,7 +326,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
${this._termsOfServiceTemplate()}
</div>

${this._endpointsTemplate()}
${this.hideToc ? '' : this._endpointsTemplate()}
`;
}

Expand All @@ -331,8 +336,8 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
return '';
}
return html`
<div class="api-title" role="heading" aria-level="${titleLevel}">
<label>API title:</label>
<div class="api-title" role="heading" aria-level="${titleLevel}" part="api-title">
<label part="api-title-label">API title:</label>
Copy link

@KrisGraySFDC KrisGraySFDC Mar 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to include the CSS Parts in the doc so people know what is capable?

Copy link
Contributor Author

@benri benri Mar 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good idea, I'll include a doc

<span>${_apiTitle}</span>
</div>`;
}
Expand All @@ -343,7 +348,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
return '';
}
return html`
<p class="inline-description version">
<p class="inline-description version" part="api-version">
<label>Version:</label>
<span>${_version}</span>
</p>`;
Expand All @@ -355,7 +360,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
return '';
}
return html`
<div role="region" class="marked-description">
<div role="region" class="marked-description" part="marked-description">
<arc-marked .markdown="${_description}" sanitize>
<div slot="markdown-html" class="markdown-body"></div>
</arc-marked>
Expand Down Expand Up @@ -427,16 +432,16 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
`<a href="${_providerUrl}" target="_blank" class="app-link provider-url">${_providerUrl}</a>`,
): undefined;
return html`
<section role="contentinfo" class="docs-section">
<section role="contentinfo" class="docs-section" part="info-section">
<label class="section">Contact information</label>
<p class="inline-description">
<p class="inline-description" part="info-inline-desc">
<span class="provider-name">${_providerName}</span>
${_providerEmail ? html`<a
class="app-link link-padding provider-email"
href="mailto:${_providerEmail}">${_providerEmail}</a>` : ''}
</p>
${_providerUrl ? html`
<p class="inline-description">
<p class="inline-description" part="info-inline-desc">
${unsafeHTML(link)}
</p>` : ''}
</section>`;
Expand All @@ -451,7 +456,7 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
`<a href="${_licenseUrl}" target="_blank" class="app-link">${_licenseName}</a>`,
);
return html`
<section aria-labelledby="licenseLabel" class="docs-section">
<section aria-labelledby="licenseLabel" class="docs-section" part="license-section">
<label class="section" id="licenseLabel">License</label>
<p class="inline-description">
${unsafeHTML(link)}
Expand Down Expand Up @@ -481,8 +486,8 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
const result = _endpoints.map((item) => this._endpointTemplate(item));
const pathLabel = this._isAsyncAPI(this.amf) ? 'channels' : 'endpoints';
return html`
<div class="separator"></div>
<div class="toc">
<div class="separator" part="separator"></div>
<div class="toc" part="toc">
<label class="section endpoints-title">API ${pathLabel}</label>
${result}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ a:hover {
.separator {
background-color: var(--api-summary-separator-color, rgba(0, 0, 0, 0.12));
height: 1px;
margin: 40px 0;
margin: var(--api-summary-separator-margin, 40px 0);
}

.endpoint-item {
Expand Down
27 changes: 25 additions & 2 deletions test/api-summary.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ describe('ApiSummary', () => {

it('renders api title', () => {
const node = element.shadowRoot.querySelector('[role="heading"]');
assert.dom.equal(node, `<div aria-level="2" class="api-title" role="heading">
<label>
assert.dom.equal(node, `<div aria-level="2" class="api-title" role="heading" part="api-title">
<label part="api-title-label">
API title:
</label>
<span>
Expand Down Expand Up @@ -96,6 +96,11 @@ describe('ApiSummary', () => {
const node = element.shadowRoot.querySelector('api-url');
assert.equal(node.url, `https://{instance}.domain.com`);
});

it('renders endpoints template', () => {
const node = element.shadowRoot.querySelector('.endpoints-title');
assert.dom.equal(node, `<label class="endpoints-title section">API endpoints</label>`);
});
});

describe('OAS properties', () => {
Expand Down Expand Up @@ -411,6 +416,24 @@ describe('ApiSummary', () => {
assert.equal(element.shadowRoot.querySelector('.section.endpoints-title').textContent, 'API channels');
});
});

describe('hideToc', () => {
let element = /** @type ApiSummary */ (null);
let amf;
before(async () => {
amf = await AmfLoader.load(compact);
});
beforeEach(async () => {
element = await basicFixture();
element.setAttribute('hideToc', 'true');
await aTimeout(0);
});

it('does not render endpoints template', () => {
const node = element.shadowRoot.querySelector('.toc');
assert.isNull(node);
});
});
});
});

Expand Down