${i18n('cc-addon-admin.heading.name')}
@@ -148,7 +150,7 @@ export class CcAddonAdmin extends LitElement {
${i18n('cc-addon-admin.heading.tags')}
${i18n('cc-addon-admin.tags-description')}
@@ -172,7 +174,7 @@ export class CcAddonAdmin extends LitElement {
${i18n('cc-addon-admin.danger-zone')}
${i18n('cc-addon-admin.delete-disclaimer')}
diff --git a/src/components/cc-addon-backups/cc-addon-backups.js b/src/components/cc-addon-backups/cc-addon-backups.js index 446f897a2..ddd0f5f58 100644 --- a/src/components/cc-addon-backups/cc-addon-backups.js +++ b/src/components/cc-addon-backups/cc-addon-backups.js @@ -253,10 +253,15 @@ export class CcAddonBackups extends LitElement { render() { return html`${i18n('cc-addon-backups.title')}
-
+ ${i18n('cc-addon-backups.title')}
${this.state.type === 'error'
- ? html`
+
${fakeString(150)}
- ${this._renderBackups(state)}
+ ${this._renderBackups(state, false)}
`;
}
@@ -285,12 +290,13 @@ export class CcAddonBackups extends LitElement {
*/
_renderLoaded(state) {
const hasData = state.backups.length > 0;
+ const isBlurred = this._overlayType === 'restore' || this._overlayType === 'delete';
return html`
- ${this._getDescription(state.providerId)}
+ ${this._getDescription(state.providerId)}
- ${!hasData ? html` ${i18n('cc-addon-backups.empty')}
` : ''}
- ${hasData ? this._renderBackups(state) : ''}
+ ${!hasData ? html` ${i18n('cc-addon-backups.empty')}
` : ''}
+ ${hasData ? this._renderBackups(state, isBlurred) : ''}
${this._overlayType === 'restore' ? this._renderRestoreOverlay(state.providerId, state.passwordForCommand) : ''}
${this._overlayType === 'delete' ? this._renderDeleteOverlay(state.providerId, state.passwordForCommand) : ''}
`;
@@ -298,15 +304,16 @@ export class CcAddonBackups extends LitElement {
/**
* @param {AddonBackupsStateLoaded | AddonBackupsStateLoading} state
+ * @param {boolean} isBlurred
* @private
*/
- _renderBackups(state) {
+ _renderBackups(state, isBlurred) {
const skeleton = state.type === 'loading';
const areBtnsDisabled = state.type === 'loading' || this._overlayType != null;
const data = state.type === 'loaded' ? state : SKELETON_BACKUPS;
return html`
-
+
${data.backups.map(
(backup) => html`
@@ -352,12 +359,11 @@ export class CcAddonBackups extends LitElement {
_renderRestoreOverlay(providerId, passwordForCommand) {
return html`
-
+
+
`;
}
@@ -445,8 +450,7 @@ export class CcAddonBackups extends LitElement {
// language=CSS
css`
:host {
- display: grid;
- grid-gap: 1em;
+ display: block;
line-height: 1.5;
}
@@ -489,15 +493,22 @@ export class CcAddonBackups extends LitElement {
.overlay {
box-shadow: 0 0 1em rgb(0 0 0 / 40%);
- margin: 2em;
+ left: 50%;
max-width: 50em;
+ padding-inline: 0;
position: fixed;
+ transform: translateX(-50%);
+ width: 90%;
}
.overlay-close-btn {
--cc-icon-size: 1.4em;
}
+ .blurred {
+ filter: blur(5px);
+ }
+
.cc-link,
cc-button[link] {
margin-right: 0.5em;
@@ -507,6 +518,11 @@ export class CcAddonBackups extends LitElement {
cc-input-text {
--cc-input-font-family: var(--cc-ff-monospace, monospace);
}
+
+ .empty-msg {
+ color: var(--cc-color-text-weak);
+ font-style: italic;
+ }
`,
];
}
diff --git a/src/components/cc-addon-credentials/cc-addon-credentials.js b/src/components/cc-addon-credentials/cc-addon-credentials.js
index 4c96fbe31..c81d5d1d9 100644
--- a/src/components/cc-addon-credentials/cc-addon-credentials.js
+++ b/src/components/cc-addon-credentials/cc-addon-credentials.js
@@ -1,5 +1,6 @@
import { css, html, LitElement } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
+import { dispatchCustomEvent } from '../../lib/events.js';
import { skeletonStyles } from '../../styles/skeleton.js';
import { i18n } from '../../translations/translation.js';
import '../cc-block/cc-block.js';
@@ -8,7 +9,7 @@ import '../cc-notice/cc-notice.js';
/**
* @typedef {import('./cc-addon-credentials.types.js').Credential} Credential
- * @typedef {import('../common.types.js').ToggleStateType} ToggleStateType
+ * @typedef {import('../cc-block/cc-block.types.js').BlockToggleState} BlockToggleState
* @typedef {import('./cc-addon-credentials.types.js').AddonType} AddonType
*/
@@ -20,6 +21,8 @@ import '../cc-notice/cc-notice.js';
* * When the `value` of a credential is nullish, a skeleton UI pattern is displayed (loading hint).
*
* @cssdisplay block
+ *
+ * @fires {CustomEvent<'open'|'close'>} cc-addon-credentials:toggle-change - Fires toggle state whenever it changes.
*/
export class CcAddonCredentials extends LitElement {
static get properties() {
@@ -28,7 +31,7 @@ export class CcAddonCredentials extends LitElement {
error: { type: Boolean },
image: { type: String },
name: { type: String },
- toggleState: { type: Boolean, attribute: 'toggle-state' },
+ toggle: { type: String },
type: { type: String },
};
}
@@ -48,8 +51,8 @@ export class CcAddonCredentials extends LitElement {
/** @type {string|null} Sets the display name of the add-on. */
this.name = null;
- /** @type {ToggleStateType} Sets the toggle state of the inner block. */
- this.toggleState = 'off';
+ /** @type {BlockToggleState} Sets the toggle state of the inner block. */
+ this.toggle = 'off';
/** @type {AddonType} Sets the type of the add-on. */
this.type = null;
@@ -89,18 +92,28 @@ export class CcAddonCredentials extends LitElement {
}
}
+ /** @param {CustomEvent<'open'|'close'>} event */
+ _onToggleChange({ detail: value }) {
+ this.toggle = value;
+ dispatchCustomEvent(this, 'toggle-change', this.toggle);
+ }
+
render() {
return html`
-
-
+
-
-
+
${i18n('cc-addon-backups.close-btn')}
+
+
+ ${this._displaySectionWithService(providerId)
+ ? html`
+
+
+ `
+ : ''}
- ${this._displaySectionWithService(providerId)
+
+
-
+
-
-
-
+
+
`;
}
@@ -399,12 +405,11 @@ export class CcAddonBackups extends LitElement {
*/
_renderDeleteOverlay(providerId, passwordForCommand) {
return html`
- ${i18n('cc-addon-backups.restore', this._selectedBackup)}
+ ${i18n('cc-addon-backups.restore', this._selectedBackup)}
+ ${this._getRestoreWithServiceTitle(providerId)}
+ ${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}
+ ${i18n('cc-addon-backups.restore.manual.title')}
+ ${this._getManualRestoreDescription(providerId)}
+ ${this._selectedBackup.restoreCommand != null
? html`
- ${this._getRestoreWithServiceTitle(providerId)}
- ${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}
- ${i18n('cc-addon-backups.command-password')}
+ ${i18n('cc-addon-backups.restore.manual.title')}
- ${this._getManualRestoreDescription(providerId)}
- ${this._selectedBackup.restoreCommand != null
- ? html`
- ${i18n('cc-addon-backups.command-password')}
-
-
-
+
${i18n('cc-addon-backups.close-btn')}
+
+
+ ${this._displaySectionWithService(providerId)
+ ? html`
+
+
+ `
+ : ''}
- ${this._displaySectionWithService(providerId)
- ? html`
-
-
- `
- : ''}
-
-
-
-
-
+ ${i18n('cc-addon-backups.delete', this._selectedBackup)}
+ ${i18n('cc-addon-backups.delete', this._selectedBackup)}
+ ${i18n('cc-addon-backups.delete.with-service.title.es-addon')}
+
+ ${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
+ href: this._selectedBackup.url,
+ })}
+
+ ${i18n('cc-addon-backups.delete.with-service.title.es-addon')}
-
- ${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
- href: this._selectedBackup.url,
- })}
-
- ${i18n('cc-addon-backups.delete.manual.title')}
- ${this._getManualDeleteDescription(providerId)}
- ${i18n('cc-addon-backups.command-password')}
- ${i18n('cc-addon-backups.delete.manual.title')}
+ ${this._getManualDeleteDescription(providerId)}
+ ${i18n('cc-addon-backups.command-password')}
+ ${i18n('cc-addon-credentials.title', { name: this.name })}
+ ${i18n('cc-addon-credentials.title', { name: this.name })}
${!this.error
? html`
- ${this._getDescription(this.type)}
+ ${this._getDescription(this.type)}
${this.credentials != null
? html`
-
+
${this.credentials.map(
({ type, secret, value }) => html`
`
+ ? html`
+
-
${i18n('cc-addon-features.title')}
+ ${i18n('cc-addon-features.title')}
- ${i18n('cc-addon-features.details')}
+ ${i18n('cc-addon-features.details')}
${this.state.type === 'error'
- ? html`
+
${features.map(
(feature) => html`
diff --git a/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js b/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js
index 3395dcc26..cc95af994 100644
--- a/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js
+++ b/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js
@@ -49,8 +49,8 @@ export class CcAddonLinkedApps extends LitElement {
*/
_getEmptyContent() {
return html`
-
${i18n('cc-addon-linked-apps.details')}
- ${i18n('cc-addon-linked-apps.no-linked-applications')}
+ ${i18n('cc-addon-linked-apps.details')}
+ ${i18n('cc-addon-linked-apps.no-linked-applications')}
`;
}
@@ -59,7 +59,9 @@ export class CcAddonLinkedApps extends LitElement {
* @private
*/
_getErrorContent() {
- return html` ${i18n('cc-addon-linked-apps.details')}
+ ${i18n('cc-addon-linked-apps.details')}
${linkedApps.map(
(linkedApp) => html`
-
+
-
-
- ${option.description}
- `;
- })}
-
${i18n('cc-addon-linked-apps.title')}
+ ${i18n('cc-addon-linked-apps.title')}
${content}
`;
@@ -156,6 +158,11 @@ export class CcAddonLinkedApps extends LitElement {
margin-left: 0.5em;
}
+ .empty-msg {
+ color: var(--cc-color-text-weak);
+ font-style: italic;
+ }
+
/* SKELETON */
.name.skeleton {
diff --git a/src/components/cc-addon-option-form/cc-addon-option-form.js b/src/components/cc-addon-option-form/cc-addon-option-form.js
index 313a3731a..f2f1bf03c 100644
--- a/src/components/cc-addon-option-form/cc-addon-option-form.js
+++ b/src/components/cc-addon-option-form/cc-addon-option-form.js
@@ -65,21 +65,23 @@ export class CcAddonOptionForm extends LitElement {
render() {
return html`
${this.title}
-
+
+
-
+
ACTION!
-
+
THIRD!
@@ -58,14 +58,14 @@ export const infoWithEmptyColumn = makeStory(conf, {
items: [
{
innerHTML: `
-
+
-
+
+
-
+
` so variation of this section height will be animated.
+ * * The content-body section is wrapped in a `` so variation of this section height will be animated.
*
- * @cssdisplay grid
+ * @cssdisplay block
*
- * @slot - The main content of the block. The direct children of this will be spaced in a 1 column CSS grid.
- * @slot button - A zone dedicated for a button/toggle in the to right corner.
- * @slot overlay - The content to display on top of the main content.
- * @slot title - The title of the block. Try to only use text. Use the `icon` property/attribute.
+ * @fires {CustomEvent<'open'|'close'>} cc-block:toggle-change - Fires toggle state whenever it changes.
+ *
+ * @slot ribbon - The ribbon in the top left corner.
+ * @slot header - A zone dedicated to header content.
+ * @slot header-icon - The icon in the header.
+ * @slot header-title - The title of the header. Try to only use text. Use the `icon` property/attribute.
+ * @slot header-right - A zone dedicated to header content on the top right side.
+ * @slot content - A zone dedicated to main content.
+ * @slot content-header - A zone dedicated to content header content.
+ * @slot content-body - A zone dedicated to content body content.
+ * @slot content-footer - A zone dedicated to content footer content.
+ * @slot footer - A zone dedicated to footer content.
+ * @slot footer-left - A zone dedicated to footer left side content.
+ * @slot footer-right - A zone dedicated to footer right side content.
*/
export class CcBlock extends LitElement {
static get properties() {
return {
icon: { type: Object },
image: { type: String },
- noHead: { type: Boolean, attribute: 'no-head', reflect: true },
ribbon: { type: String, reflect: true },
- state: { type: String, reflect: true },
- _overlay: { type: Boolean, state: true },
+ toggle: { type: String, reflect: true },
};
}
@@ -47,196 +58,337 @@ export class CcBlock extends LitElement {
/** @type {string|null} Sets the icon before the title using a ``. Icon is hidden if nullish. Property will be ignored if `icon` property is already set. */
this.image = null;
- /** @type {boolean} Hides the head section. */
- this.noHead = false;
-
- /** @type {string|null} Adds a ribbon on the top left corner if it is not empty. */
+ /** @type {string|null} Adds a ribbon in the top left corner if it is not empty. */
this.ribbon = null;
- /** @type {ToggleStateType} Sets the state of the toggle behaviour. */
- this.state = 'off';
-
- /** @type {boolean} */
- this._overlay = false;
+ /** @type {BlockToggleState} Sets the state of the toggle behaviour. */
+ this.toggle = 'off';
}
- _clickToggle() {
- if (this.state === 'close') {
- this.state = 'open';
- } else if (this.state === 'open') {
- this.state = 'close';
+ _onClickToggle() {
+ if (this.toggle === 'close') {
+ this.toggle = 'open';
+ } else if (this.toggle === 'open') {
+ this.toggle = 'close';
}
+ dispatchCustomEvent(this, 'toggle-change', this.toggle);
}
render() {
- const isToggleEnabled = this.state === 'open' || this.state === 'close';
- const isOpen = this.state !== 'close';
+ const isToggleEnabled = this.toggle === 'open' || this.toggle === 'close';
+ const isToggleOpen = this.toggle === 'open';
+ const areContentAndFooterHidden = isToggleEnabled && !isToggleOpen;
- /* TODO when reworking the component, check this a11y issue https://github.com/CleverCloud/clever-components/issues/225#issuecomment-1239462826 */
- /* eslint-disable lit-a11y/click-events-have-key-events */
return html`
- ${this.ribbon != null && this.ribbon !== '' ? html`
- ${!isToggleEnabled || isOpen
+
+
+ `;
}
static get styles() {
return [
// language=CSS
+ linkStyles,
css`
:host {
background-color: var(--cc-color-bg-default, #fff);
border: 1px solid var(--cc-color-border-neutral, #aaa);
border-radius: var(--cc-border-radius-default, 0.25em);
box-sizing: border-box;
- display: grid;
+ display: block;
+ margin-bottom: 1em;
overflow: hidden;
position: relative;
}
- .head {
+ .container {
+ display: grid;
+ gap: 0.5em;
+ padding-block: 1em;
+
+ --left-space: 1em;
+ }
+
+ .container[ribbon-is-slotted],
+ :host([ribbon]:not([ribbon=''])) .container {
+ --left-space: 3.5em;
+ }
+
+ .ribbon {
+ display: none;
+ }
+
+ .container[ribbon-is-slotted] .ribbon,
+ :host([ribbon]:not([ribbon=''])) .ribbon {
+ background: var(--cc-color-bg-strong);
+ color: white;
+ display: inherit;
+ font-size: 0.9em;
+ font-weight: bold;
+ height: var(--height);
+ left: calc(var(--width) / -2);
+ line-height: var(--height);
+ position: absolute;
+ text-align: center;
+ top: calc(var(--height) / -2);
+ transform: rotate(var(--r)) translateY(var(--translate));
+ width: var(--width);
+ z-index: 2;
+
+ --height: 1.5em;
+ --width: 8em;
+ --r: -45deg;
+ --translate: 1.6em;
+ }
+
+ /* region header */
+
+ .header {
align-items: center;
color: var(--cc-color-text-primary-strongest);
+ display: none;
+ padding: 1em 1em 1em var(--left-space);
+ }
+
+ .container[header-is-slotted] .header,
+ .container[header-title-is-slotted] .header,
+ .container[header-right-is-slotted] .header,
+ .container[header-icon-is-slotted] .header {
display: flex;
- padding: 1em;
+ flex-wrap: wrap;
+ gap: 0.5em;
}
- :host([ribbon]) .head {
- padding-left: 3.5em;
+ .container[header-is-slotted],
+ .container[header-title-is-slotted],
+ .container[header-right-is-slotted] {
+ padding-top: 0;
}
- :host([state='open']) .head:hover,
- :host([state='close']) .head:hover {
- background-color: var(--cc-color-bg-neutral-hovered);
- cursor: pointer;
+ ::slotted([slot='header']) {
+ padding: 1em 1em 1em var(--left-space);
}
- cc-img {
- align-self: flex-start;
- border-radius: var(--cc-border-radius-default, 0.25em);
- height: 1.5em;
- margin-right: 1em;
- width: 1.5em;
+ .header-icon {
+ display: none;
}
- cc-icon {
- align-self: flex-start;
- margin-right: 1em;
+ .container[header-icon-is-slotted] .header-icon,
+ .has-image-or-icon.header-icon {
+ display: flex;
}
- .toggle_button {
- --cc-icon-size: 1.5em;
+ .header-img,
+ ::slotted([slot='header-icon']) {
+ border-radius: var(--cc-border-radius-default, 0.25em);
+ height: 1.5em;
+ width: 1.5em;
}
- ::slotted([slot='title']) {
+ .header-title {
flex: 1 1 0;
+ }
+
+ ::slotted([slot='header-title']) {
+ color: var(--cc-color-text-primary-strongest);
font-size: 1.2em;
font-weight: bold;
}
- .info-ribbon {
- --height: 1.5em;
- --width: 8em;
- --r: -45deg;
- --translate: 1.6em;
+ .container[header-right-is-slotted] .header-right {
+ display: inline-block;
+ }
- background: var(--cc-color-bg-strong);
- color: white;
- font-size: 0.9em;
- font-weight: bold;
- height: var(--height);
- left: calc(var(--width) / -2);
- line-height: var(--height);
- position: absolute;
- text-align: center;
- top: calc(var(--height) / -2);
- transform: rotate(var(--r)) translateY(var(--translate));
- width: var(--width);
- z-index: 2;
+ .toggle-button {
+ --cc-icon-color: var(--cc-color-text-primary-strongest);
+
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: flex;
+ font-family: inherit;
+ font-size: 1em;
+ justify-content: space-between;
+ padding: 0 1em 0 0;
+ text-align: start;
}
- .main {
- display: grid;
- grid-gap: 1em;
- padding: 0.5em 1em 1em;
+ .toggle-icon {
+ transition: transform 0.3s ease-out;
+ }
+
+ .toggle-button[aria-expanded='true'] .toggle-icon {
+ transform: rotate(0.25turn);
+ }
+
+ .toggle-button:hover {
+ background-color: var(--cc-color-bg-neutral-hovered);
}
- :host([no-head]) .main {
- padding: 1em;
+ /* endregion */
+
+ /* region content */
+
+ .content {
+ display: none;
+ gap: 1em;
}
- .main-wrapper--overlay {
- filter: blur(0.3em);
- opacity: 0.35;
+ ::slotted([slot='content']) {
+ padding-left: var(--left-space);
+ padding-right: 1em;
+ }
+
+ .container[content-is-slotted] .content,
+ .container[content-header-is-slotted] .content,
+ .container[content-body-is-slotted] .content,
+ .container[content-footer-is-slotted] .content {
+ display: grid;
+ gap: 1em;
}
- /* superpose main and overlay */
+ .content-header,
+ .content-body,
+ .content-footer {
+ display: none;
+ padding: 0 1em 0 var(--left-space);
+ }
- .main-wrapper,
- ::slotted([slot='overlay']) {
- grid-area: 2 / 1 / auto / auto;
+ .container[content-header-is-slotted] .content-header,
+ .container[content-body-is-slotted] .content-body,
+ .container[content-footer-is-slotted] .content-footer {
+ display: block;
}
- :host([ribbon]) .main-wrapper {
- padding-left: 2.5em;
+ .content-body {
+ margin-block: -0.5em;
+ padding-block: 0.5em;
}
- ::slotted([slot='overlay']) {
- align-content: center;
+ #content-and-footer {
display: grid;
- justify-items: center;
- /* we have a few z-index:2 on atoms */
- z-index: 10;
+ gap: 1em;
}
- ::slotted(.cc-block_empty-msg) {
- color: var(--cc-color-text-weak);
- font-style: italic;
+ #content-and-footer.hidden {
+ display: none;
}
+
+ /* endregion */
+
+ /* region footer */
+
+ .footer {
+ background-color: var(--cc-color-bg-neutral);
+ box-shadow: inset 0 6px 6px -6px rgb(0 0 0 / 40%);
+ display: none;
+ flex-wrap: wrap;
+ gap: 1em;
+ /* TODO doc */
+ justify-content: flex-end;
+ padding: 0.5em 1em;
+ }
+
+ .footer-left {
+ flex: 1 1 0;
+ }
+
+ .footer-left,
+ .footer-right {
+ display: none;
+ }
+
+ .container[footer-is-slotted],
+ .container[footer-left-is-slotted],
+ .container[footer-right-is-slotted],
+ :host([toggle='close']) .container {
+ padding-bottom: 0;
+ }
+
+ .container[footer-is-slotted] .footer,
+ .container[footer-left-is-slotted] .footer,
+ .container[footer-right-is-slotted] .footer {
+ display: flex;
+ }
+
+ .container[footer-left-is-slotted] .footer-left,
+ .container[footer-right-is-slotted] .footer-right {
+ display: block;
+ }
+
+ ::slotted([slot='footer']) {
+ padding: 0.5em 1em;
+ }
+
+ /* endregion */
`,
];
}
diff --git a/src/components/cc-block/cc-block.stories.js b/src/components/cc-block/cc-block.stories.js
index ba6f29ce2..c3a9533b4 100644
--- a/src/components/cc-block/cc-block.stories.js
+++ b/src/components/cc-block/cc-block.stories.js
@@ -11,10 +11,14 @@ export default {
component: 'cc-block',
};
+/**
+ * @typedef {import('./cc-block.js').CcBlock} CcBlock
+ */
+
const htmlExample = `
- >} */
items: [
{
innerHTML: htmlExample,
@@ -29,30 +34,32 @@ export const defaultStory = makeStory(conf, {
],
});
-export const overlayWithLoader = makeStory(conf, {
+export const image = makeStory(conf, {
+ /** @type {Array>} */
items: [
{
- // language=HTML
- innerHTML: `
- >} */
items: [
{
- image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
- innerHTML: htmlExample,
+ innerHTML: `
+ 
+ >} */
items: [
{
icon: iconInfo,
@@ -61,10 +68,25 @@ export const icon = makeStory(conf, {
],
});
+export const iconSlotted = makeStory(conf, {
+ /** @type {Array>} */
+ items: [
+ {
+ innerHTML: `
+
+ >} */
items: [
{
image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
@@ -74,118 +96,263 @@ If you set both \`image\` and \`icon\` properties, the \`image\` property will b
],
});
-export const button = makeStory(conf, {
+export const ribbon = makeStory(conf, {
+ /** @type {Array>} */
items: [
{
+ ribbon: 'info',
innerHTML: `
- A button
- >} */
items: [
{
- noHead: true,
innerHTML: `
- >} */
items: [
{
- ribbon: 'info',
+ toggle: 'open',
innerHTML: `
- >} */
items: [
{
- ribbon: 'info',
- state: 'open',
innerHTML: `
- >} */
items: [
{
- ribbon: 'info',
- noHead: true,
innerHTML: `
- >} */
items: [
{
+ image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
innerHTML: htmlExample,
- state: 'open',
+ toggle: 'open',
},
],
});
-export const stateWithClose = makeStory(conf, {
+export const iconAndOpen = makeStory(conf, {
+ /** @type {Array>} */
items: [
{
+ icon: iconInfo,
innerHTML: htmlExample,
- state: 'close',
+ toggle: 'open',
},
],
});
-export const stateWithOverflow = makeStory(conf, {
+export const headerRightContent = makeStory(conf, {
+ /** @type {Array>} */
items: [
{
innerHTML: `
- A button
+ >} */
items: [
{
- image: 'https://assets.clever-cloud.com/logos/nodejs.svg',
- innerHTML: htmlExample,
- state: 'open',
+ innerHTML: `
+ >} */
items: [
{
- icon: iconInfo,
- innerHTML: htmlExample,
- state: 'open',
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+ >} */
+ items: [
+ {
+ innerHTML: `
+
-
+
+
${this.title}
+
+
+ ${option.description}
+ `;
+ })}
+
+
@@ -95,6 +97,11 @@ export class CcAddonOptionForm extends LitElement {
display: block;
}
+ .content {
+ display: grid;
+ gap: 1em;
+ }
+
.button-bar {
display: grid;
justify-content: flex-end;
diff --git a/src/components/cc-block-section/cc-block-section.stories.js b/src/components/cc-block-section/cc-block-section.stories.js
index 570a4ac78..3618743d8 100644
--- a/src/components/cc-block-section/cc-block-section.stories.js
+++ b/src/components/cc-block-section/cc-block-section.stories.js
@@ -29,14 +29,14 @@ export const defaultStory = makeStory(conf, {
items: [
{
innerHTML: `
- This is my block
- This is my block
+ Subtitle Foo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id.
Subtitle Bar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id.
Danger section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id.
This is my block
- This is my block
+ Subtitle Foo
Subtitle Bar
This is my block
- This is my block
+ Subtitle Foo
Subtitle Bar
${this.ribbon}
` : ''}
- ${!this.noHead
- ? html`
-
- ${this.image != null && this.icon == null ? html` ${isOpen ? i18n('cc-block.toggle.close') : i18n('cc-block.toggle.open')}
-
- `
- : ''}
-
- `
- : ''}
-
-
+
`;
}
- firstUpdated() {
- /** @type {HTMLSlotElement|undefined} */
- const $overlay = this.shadowRoot.querySelector('slot[name="overlay"]');
- $overlay.addEventListener('slotchange', () => {
- const oldVal = this._overlay;
- this._overlay = $overlay.assignedNodes().length > 0;
- this.requestUpdate('_overlay', oldVal);
- });
+ _renderHeader() {
+ const hasImageOrIcon = this.image != null || this.icon != null;
+ return html`
+
+
+ ${!isStringEmpty(this.ribbon) ? html`
+
+
+ ${isToggleEnabled
? html`
- ${this.ribbon}
` : ''}
+
-
+
`
- : ''}
-
+ : this._renderHeader()}
+
+
+
+
+
+
+
+
+ This is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
`;
const conf = {
@@ -22,6 +26,7 @@ const conf = {
};
export const defaultStory = makeStory(conf, {
+ /** @type {ArrayThis is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
-
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ `,
},
],
});
export const icon = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ `,
+ },
+ ],
+});
+
export const imageAndIcon = makeStory(conf, {
docs: `
If you set both \`image\` and \`icon\` properties, the \`image\` property will be ignored:
`,
+ /** @type {ArrayThis is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
`,
},
],
});
-export const noHead = makeStory(conf, {
+export const ribbonSlotted = makeStory(conf, {
+ /** @type {ArrayLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ info
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
`,
},
],
});
-export const ribbon = makeStory(conf, {
+export const ribbonWithToggle = makeStory(conf, {
+ /** @type {ArrayThis is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ info
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
`,
},
],
});
-export const ribbonWithState = makeStory(conf, {
+export const toggleOpen = makeStory(conf, {
+ /** @type {ArrayThis is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
- `,
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in the right footer side.
+ `,
+ toggle: 'open',
},
],
});
-export const ribbonWithNoHead = makeStory(conf, {
+export const toggleClose = makeStory(conf, {
+ /** @type {ArrayLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
- `,
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in the right footer side.
+ `,
+ toggle: 'close',
},
],
});
-export const stateWithOpen = makeStory(conf, {
+export const imageAndOpen = makeStory(conf, {
+ /** @type {ArrayThis is my block
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
- Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ This is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
`,
- state: 'open',
},
],
});
-export const imageAndOpen = makeStory(conf, {
+export const header = makeStory(conf, {
+ /** @type {ArraySome custom content in the header.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ `,
},
],
});
-export const iconAndOpen = makeStory(conf, {
+export const contentHeader = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Some content in my content header.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+`,
+ },
+ ],
+});
+
+export const contentBodyWithOverflow = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ `,
+ },
+ ],
+});
+
+export const contentFooterAndHeader = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Some content in my content header.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae culpa eaque eum ex explicabo iusto laudantium magni odio possimus quaerat, qui sit tenetur totam velit veritatis vitae. Magni, nemo!
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae culpa eaque eum ex explicabo iusto laudantium magni odio possimus quaerat, qui sit tenetur totam velit veritatis vitae. Magni, nemo!
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae culpa eaque eum ex explicabo iusto laudantium magni odio possimus quaerat, qui sit tenetur totam velit veritatis vitae. Magni, nemo!
+Some content in my content footer.
+
+`,
+ },
+ ],
+ css: `
+ p.text {
+ display: none;
+ }
+
+ input:checked ~ p.text {
+ display: block;
+ }
+ `,
+});
+
+export const contentFooter = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in my content footer.
+`,
+ },
+ ],
+});
+
+export const content = makeStory(conf, {
+ /** @type {ArrayLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ `,
+ },
+ ],
+});
+
+export const footerLeft = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in the left footer side.
+`,
+ },
+ ],
+});
+
+export const footerRight = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in the right footer side.
+`,
+ },
+ ],
+});
+
+export const footerLeftAndRight = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some content in the left footer side.
+ Some content in the right footer side.
+`,
+ },
+ ],
+});
+
+export const footer = makeStory(conf, {
+ /** @type {ArrayThis is my block
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat dui at leo porta dignissim. Etiam ut purus ultrices, pulvinar tellus quis, cursus massa. Mauris dignissim accumsan ex, at vestibulum lectus fermentum id. Quisque nec magna arcu. Quisque in metus sed erat sodales euismod eget id purus. Sed sagittis rhoncus mauris. Ut sit amet urna ac nunc semper porta. Nam ut felis eu velit luctus rutrum. Nam leo nisl, molestie a varius non, ullamcorper sit amet tortor. Donec in convallis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit venenatis erat, eu malesuada nulla viverra eu. Curabitur porta risus augue, non rutrum lectus hendrerit a.
+ Sed volutpat dolor nec rutrum vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rhoncus turpis orci, at tempor tortor scelerisque varius. Integer nec fermentum dui. Integer vitae dolor sit amet erat ullamcorper elementum. Donec blandit lacinia erat, vitae blandit libero ornare id. In luctus odio a lacus dignissim, id posuere tortor lacinia. Pellentesque sed massa ac tellus tincidunt rutrum. Praesent commodo enim nibh, ut consectetur tortor consequat non. Aliquam mi enim, mattis eu velit quis, sollicitudin fringilla ex. Donec at augue ultrices, porta justo in, mattis tortor. Nunc sollicitudin nisi eget urna condimentum semper. Pellentesque sagittis quam eu mollis viverra. Proin tincidunt auctor nibh quis suscipit.
+ Some custom content in the footer.
+`,
},
],
});
diff --git a/src/components/cc-block/cc-block.types.d.ts b/src/components/cc-block/cc-block.types.d.ts
new file mode 100644
index 000000000..5abf3dd16
--- /dev/null
+++ b/src/components/cc-block/cc-block.types.d.ts
@@ -0,0 +1 @@
+export type BlockToggleState = 'off' | 'open' | 'close';
diff --git a/src/components/cc-domain-management/cc-domain-management.js b/src/components/cc-domain-management/cc-domain-management.js
index 32c442721..faf09e07d 100644
--- a/src/components/cc-domain-management/cc-domain-management.js
+++ b/src/components/cc-domain-management/cc-domain-management.js
@@ -5,6 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
import {
iconRemixDeleteBinLine as iconDelete,
iconRemixLockUnlockFill as iconHttpOnly,
+ iconRemixInformationFill as iconInfo,
iconRemixExternalLinkLine as iconLink,
iconRemixStarLine as iconPrimary,
iconRemixFlaskLine as iconTest,
@@ -22,7 +23,7 @@ import {
import { dispatchCustomEvent } from '../../lib/events.js';
import { focusBySelector } from '../../lib/focus-helper.js';
import { accessibilityStyles } from '../../styles/accessibility.js';
-import { linkStyles } from '../../templates/cc-link/cc-link.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
import '../cc-badge/cc-badge.js';
import '../cc-block-section/cc-block-section.js';
@@ -32,6 +33,11 @@ import '../cc-input-text/cc-input-text.js';
import '../cc-loader/cc-loader.js';
import '../cc-notice/cc-notice.js';
+const DOMAIN_NAMES_DOCUMENTATION =
+ 'https://developers.clever-cloud.com/doc/administrate/domain-names/#using-a-cleverappsio-free-domain-with-built-in-ssl';
+const TLS_CERTIFICATES_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/administrate/ssl/';
+const DNS_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/administrate/domain-names/';
+
/**
* @typedef {import('./cc-domain-management.types.js').DomainManagementDnsInfoState} DomainManagementDnsInfoState
* @typedef {import('./cc-domain-management.types.js').DomainManagementListState} DomainManagementListState
@@ -309,9 +315,9 @@ export class CcDomainManagement extends LitElement {
return html`
${i18n('cc-domain-management.main-heading')}
+ ${i18n('cc-domain-management.main-heading')}
- ${i18n('cc-domain-management.form.info.docs')}
${i18n('cc-domain-management.form.info.cleverapps')}
@@ -319,7 +325,7 @@ export class CcDomainManagement extends LitElement {${this._renderForm(this.domainFormState)}
-
${i18n('cc-domain-management.list.heading')}
${this.domainListState.type === 'loaded'
@@ -335,19 +341,34 @@ export class CcDomainManagement extends LitElement {
${this.domainListState.type === 'loading' ? html`
-
+ ${ccLink(
+ DOMAIN_NAMES_DOCUMENTATION,
+ html`
${i18n('cc-domain-management.certif.heading')}
-
+
+
-
${i18n('cc-domain-management.certif.heading')}
+ ${i18n('cc-domain-management.certif.automated')}
${i18n('cc-domain-management.certif.custom')}
+ ${ccLink(
+ TLS_CERTIFICATES_DOCUMENTATION,
+ html`
${i18n('cc-domain-management.dns.heading')}
-
+
+
-
+
${i18n('cc-domain-management.dns.heading')}
+ ${i18n('cc-domain-management.dns.desc')}
@@ -365,6 +386,13 @@ export class CcDomainManagement extends LitElement {
${this.dnsInfoState.type === 'loaded'
? this._renderDnsInfo(this.dnsInfoState.cnameRecord, this.dnsInfoState.aRecords)
: ''}
+
+
`;
@@ -576,7 +604,7 @@ export class CcDomainManagement extends LitElement {
*/
_renderDnsInfo(cnameRecord, aRecords) {
return html`
-
+ ${ccLink(
+ DNS_DOCUMENTATION,
+ html`
${i18n('cc-domain-management.dns.cname.heading')}
${i18n('cc-domain-management.dns.cname.desc')}
${i18n('cc-domain-management.dns.a.heading')}
${i18n('cc-domain-management.dns.a.desc')}
@@ -616,7 +644,7 @@ export class CcDomainManagement extends LitElement {
.wrapper {
display: flex;
flex-direction: column;
- gap: 1.5em;
+ gap: 0.5em;
}
code {
@@ -823,6 +851,12 @@ export class CcDomainManagement extends LitElement {
}
/** #endregion */
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-elasticsearch-info/cc-elasticsearch-info.js b/src/components/cc-elasticsearch-info/cc-elasticsearch-info.js
index 62b754bdb..06a7b61c6 100644
--- a/src/components/cc-elasticsearch-info/cc-elasticsearch-info.js
+++ b/src/components/cc-elasticsearch-info/cc-elasticsearch-info.js
@@ -101,18 +101,17 @@ export class CcElasticsearchInfo extends LitElement {
}
return html`
-
-
+
${i18n('cc-elasticsearch-info.text')}
+ ${i18n('cc-elasticsearch-info.info')}
+ ${i18n('cc-elasticsearch-info.text')}
-
+
-
`;
@@ -214,7 +216,7 @@ export class CcEmailList extends LitElement {
const badgeIcon = verified ? iconVerified : iconUnverified;
return html`
-
+
+
${defaultDescription}
-
${this._renderLinks(this.state.links, skeleton)}
+
+
${ccLink(
ELASTICSEARCH_DOCUMENTATION,
- html`
-
`;
diff --git a/src/components/cc-email-list/cc-email-list.js b/src/components/cc-email-list/cc-email-list.js
index 22a73b5b2..531823272 100644
--- a/src/components/cc-email-list/cc-email-list.js
+++ b/src/components/cc-email-list/cc-email-list.js
@@ -179,7 +179,7 @@ export class CcEmailList extends LitElement {
render() {
return html`
${i18n('cc-email-list.title')}
+ ${i18n('cc-email-list.title')}
${this.emails.state === 'loading'
? html`
@@ -194,7 +194,9 @@ export class CcEmailList extends LitElement {
`
: ''}
${this.emails.state === 'error'
- ? html` ${i18n('cc-email-list.primary.title')}
${i18n('cc-email-list.primary.description')}
@@ -251,7 +253,7 @@ export class CcEmailList extends LitElement {
const markingAsPrimary = addresses.some((item) => item.state === 'marking-as-primary');
return html`
- ${i18n('cc-email-list.secondary.title')}
${i18n('cc-email-list.secondary.description')}
diff --git a/src/components/cc-env-var-form/cc-env-var-form.js b/src/components/cc-env-var-form/cc-env-var-form.js
index 9126829b5..5ac58f52b 100644
--- a/src/components/cc-env-var-form/cc-env-var-form.js
+++ b/src/components/cc-env-var-form/cc-env-var-form.js
@@ -1,17 +1,19 @@
import { css, html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
import { dispatchCustomEvent } from '../../lib/events.js';
-import { linkStyles } from '../../templates/cc-link/cc-link.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
+import '../cc-block/cc-block.js';
import '../cc-button/cc-button.js';
import '../cc-env-var-editor-expert/cc-env-var-editor-expert.js';
import '../cc-env-var-editor-json/cc-env-var-editor-json.js';
import '../cc-env-var-editor-simple/cc-env-var-editor-simple.js';
import '../cc-expand/cc-expand.js';
-import '../cc-loader/cc-loader.js';
import '../cc-notice/cc-notice.js';
import '../cc-toggle/cc-toggle.js';
+const ENV_VAR_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/reference/reference-environment-variables/';
+
/**
* @typedef {import('./cc-env-var-form.types.js').EnvVarFormContextType} EnvVarFormContextType
* @typedef {import('./cc-env-var-form.types.js').EnvVarFormState} EnvVarFormState
@@ -234,8 +236,26 @@ export class CcEnvVarForm extends LitElement {
/** @param {CcEnvVarFormPropertyValues} changedProperties */
willUpdate(changedProperties) {
- if (changedProperties.has('context') && this.context === 'env-var-addon') {
- this.readonly = true;
+ if (changedProperties.has('context') || changedProperties.has('addonName') || changedProperties.has('appName')) {
+ if (this.context === 'env-var') {
+ this.heading = i18n('cc-env-var-form.heading.env-var');
+ this._description = i18n('cc-env-var-form.description.env-var', { appName: this.appName });
+ }
+ if (this.context === 'env-var-simple') {
+ this.heading = i18n('cc-env-var-form.heading.env-var');
+ }
+ if (this.context === 'env-var-addon') {
+ this.heading = i18n('cc-env-var-form.heading.env-var');
+ this.readonly = true;
+ }
+ if (this.context === 'exposed-config') {
+ this.heading = i18n('cc-env-var-form.heading.exposed-config');
+ this._description = i18n('cc-env-var-form.description.exposed-config', { appName: this.appName });
+ }
+ if (this.context === 'config-provider') {
+ this.heading = i18n('cc-env-var-form.heading.config-provider');
+ this._description = i18n('cc-env-var-form.description.config-provider', { addonName: this.addonName });
+ }
}
if (changedProperties.has('state') && this.state.type === 'loaded') {
@@ -249,13 +269,19 @@ export class CcEnvVarForm extends LitElement {
if (this.state.type === 'error') {
return html`
- ${heading != null ? html`
- ${heading}
` : ''}
- ${defaultDescription}
-
-
+
+ ${!this.readonly
+ ? html`
+
+ `
+ : ''}
+
+
-
+
-
+
+
+ ${heading != null ? html`
- ${heading}
` : ''}
+ ${defaultDescription}
+
+
+
+
`;
}
@@ -263,25 +289,26 @@ export class CcEnvVarForm extends LitElement {
const isSaving = this.state.type === 'saving';
const isEditorDisabled = isSaving || isLoading;
const isFormDisabled = this._currentVariables == null || this._isPristine || isEditorDisabled;
- const hasOverlay = isSaving;
return html`
-
+
+
- ${heading != null ? html`
-
- ${heading}
` : ''}
-
-
+ ${ccLink(
+ `${ENV_VAR_DOCUMENTATION}`,
+ html`
+
`;
}
@@ -345,27 +381,15 @@ export class CcEnvVarForm extends LitElement {
// language=CSS
css`
:host {
- background-color: var(--cc-color-bg-default, #fff);
- border: 1px solid var(--cc-color-border-neutral, #aaa);
- border-radius: var(--cc-border-radius-default, 0.25em);
display: block;
- padding: 0.5em 1em;
}
- .header {
- align-items: flex-start;
+ .toggle {
display: flex;
- flex-wrap: wrap;
- gap: 0.5em;
- justify-content: center;
- margin-block: 0.5em;
}
- .heading {
- color: var(--cc-color-text-primary-strongest);
- flex: 1 1 0;
- font-size: 1.2em;
- font-weight: bold;
+ .toggle[slot='header'] {
+ justify-content: center;
}
.description {
@@ -373,40 +397,12 @@ export class CcEnvVarForm extends LitElement {
display: block;
font-style: italic;
line-height: 1.5;
- margin-bottom: 0.5em;
- }
-
- .has-overlay {
- --cc-skeleton-state: paused;
-
- filter: blur(0.3em);
- }
-
- .overlay-container {
- position: relative;
- }
-
- cc-expand {
- /* We need to spread so the focus rings can be visible even with cc-expand default overflow:hidden */
- /* It also allows cc-env-var-create to span through the whole width of the cc-block in simple mode */
- margin-inline: -1em;
- padding: 0.5em 1em;
- }
-
- .saving-loader {
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
}
.button-bar {
display: flex;
flex-wrap: wrap;
gap: 1em;
- margin-bottom: 0.5em;
- margin-top: 1em;
}
.spacer {
@@ -416,6 +412,12 @@ export class CcEnvVarForm extends LitElement {
.error-container {
padding-bottom: 0.5em;
}
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-env-var-form/cc-env-var-form.stories.js b/src/components/cc-env-var-form/cc-env-var-form.stories.js
index 5d8cd19cc..85038ee2e 100644
--- a/src/components/cc-env-var-form/cc-env-var-form.stories.js
+++ b/src/components/cc-env-var-form/cc-env-var-form.stories.js
@@ -153,9 +153,13 @@ export const saving = makeStory(conf, {
{
appName: 'Foobar backend python',
context: 'env-var',
- state: { type: 'saving', validationMode: 'simple', variables: VARIABLES_FULL },
+ state: { type: 'loaded', validationMode: 'simple', variables: VARIABLES_FULL },
},
],
+ // The component needs to be loaded with data for it to display this data in saving mode afterward.
+ onUpdateComplete: (component) => {
+ component.state = { type: 'saving', validationMode: 'simple', variables: VARIABLES_FULL };
+ },
});
export const errorWithLoading = makeStory(conf, {
diff --git a/src/components/cc-grafana-info/cc-grafana-info.js b/src/components/cc-grafana-info/cc-grafana-info.js
index 38b7ce466..f82f2d39e 100644
--- a/src/components/cc-grafana-info/cc-grafana-info.js
+++ b/src/components/cc-grafana-info/cc-grafana-info.js
@@ -90,11 +90,11 @@ export class CcGrafanaInfo extends LitElement {
return html`
${i18n('cc-grafana-info.main-title')}
+ ${i18n('cc-grafana-info.main-title')}
${isSwitchingGrafanaStatus ? html` ${i18n('cc-grafana-info.documentation-title')}
${i18n('cc-grafana-info.documentation-description')}
@@ -110,7 +110,7 @@ export class CcGrafanaInfo extends LitElement {
${this.state.type === 'loading'
? html`
-
+
+
@@ -128,13 +128,18 @@ export class CcGrafanaInfo extends LitElement {
: ''}
${isGrafanaDisabled
? html`
-
+
+
+
${i18n('cc-grafana-info.loading-title')}
${i18n('cc-grafana-info.loading-title')}
${i18n('cc-grafana-info.enable-title')}
${i18n('cc-grafana-info.enable-description')}
-
+
${i18n('cc-grafana-info.enable-title')}
@@ -143,7 +148,7 @@ export class CcGrafanaInfo extends LitElement {
: ''}
${isGrafanaEnabled
? html`
- ${i18n('cc-grafana-info.grafana-link-title')}
${i18n('cc-grafana-info.grafana-link-description')}
@@ -165,7 +170,7 @@ export class CcGrafanaInfo extends LitElement { `} -${i18n('cc-grafana-info.reset-title')}
${i18n('cc-grafana-info.reset-description')}
@@ -185,7 +190,7 @@ export class CcGrafanaInfo extends LitElement {
? html`
${this._getDashboards().map(
(item) => html`
-
+
${item.title}
${item.description}
@@ -201,17 +206,30 @@ export class CcGrafanaInfo extends LitElement {
: ''}
${isGrafanaEnabled
? html`
-
+
`
: ''}
+
+
${i18n('cc-grafana-info.disable-title')}
${i18n('cc-grafana-info.disable-description')}
-
+
${i18n('cc-grafana-info.disable-title')}
+ ${ccLink(
+ `${GRAFANA_DOCUMENTATION}`,
+ html`
`;
}
diff --git a/src/components/cc-header-addon/cc-header-addon.js b/src/components/cc-header-addon/cc-header-addon.js
index 52c8bfd06..735d54e75 100644
--- a/src/components/cc-header-addon/cc-header-addon.js
+++ b/src/components/cc-header-addon/cc-header-addon.js
@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { fakeString } from '../../lib/fake-strings.js';
import { skeletonStyles } from '../../styles/skeleton.js';
import { i18n } from '../../translations/translation.js';
+import '../cc-block/cc-block.js';
import '../cc-img/cc-img.js';
import '../cc-input-text/cc-input-text.js';
import '../cc-notice/cc-notice.js';
@@ -67,8 +68,8 @@ export class CcHeaderAddon extends LitElement {
}
return html`
-
-
+
+
-
-
+
-
+
+
})
@@ -238,12 +239,12 @@ export class CcHeaderApp extends LitElement {
-
+
`;
}
@@ -412,18 +413,10 @@ export class CcHeaderApp extends LitElement {
display: block;
}
- .wrapper {
- background-color: var(--cc-color-bg-default, #fff);
- border: 1px solid var(--cc-color-border-neutral, #aaa);
- border-radius: var(--cc-border-radius-default, 0.25em);
- overflow: hidden;
- }
-
.main {
display: flex;
flex-wrap: wrap;
gap: 1em;
- padding: 1em;
}
.flavor-logo {
@@ -510,15 +503,11 @@ export class CcHeaderApp extends LitElement {
.messages {
align-items: center;
- background-color: var(--cc-color-bg-neutral);
- box-shadow: inset 0 6px 6px -6px rgb(0 0 0 / 40%);
- box-sizing: border-box;
display: flex;
flex-wrap: wrap;
font-size: 0.9em;
font-style: italic;
gap: 0.57em;
- padding: 0.5em 1.1em;
}
.status-icon {
diff --git a/src/components/cc-header-orga/cc-header-orga.js b/src/components/cc-header-orga/cc-header-orga.js
index b473fee41..2590079ce 100644
--- a/src/components/cc-header-orga/cc-header-orga.js
+++ b/src/components/cc-header-orga/cc-header-orga.js
@@ -5,6 +5,7 @@ import {
iconRemixPhoneFill as iconPhone,
} from '../../assets/cc-remix.icons.js';
import '../cc-badge/cc-badge.js';
+import '../cc-block/cc-block.js';
import '../cc-img/cc-img.js';
import '../cc-notice/cc-notice.js';
@@ -14,6 +15,7 @@ import { i18n } from '../../translations/translation.js';
/**
* @typedef {import('./cc-header-orga.types.js').HeaderOrgaState} HeaderOrgaState
+ * @typedef {import('../../lib/events.types.js').EventWithTarget} SlotEventWithTarget
* @typedef {import('lit').TemplateResult<1>} TemplateResult
*/
@@ -54,6 +56,26 @@ export class CcHeaderOrga extends LitElement {
.join('');
}
+ /**
+ * Returns a function that sets or removes the 'slot' attribute on a slot element based on whether it has assigned nodes.
+ *
+ * @param {string} slotName - The name of the slot to set if the element has assigned nodes.
+ * @returns {(e: SlotEventWithTarget) => void} A function that handles the slot change event.
+ */
+ _setSlotAttributeIfHasAssignedNodes(slotName) {
+ return (e) => {
+ const slotElement = e.target;
+ const isSlotted = slotElement.assignedNodes().length > 0;
+
+ if (isSlotted) {
+ slotElement.setAttribute('slot', slotName);
+ } else {
+ slotElement.removeAttribute('slot');
+ }
+ this.requestUpdate();
+ };
+ }
+
render() {
if (this.state.type === 'error') {
return html`
-
+
+
+
+
- ${this._renderAvatar(skeleton, avatar, name)} ${name} @@ -119,8 +141,19 @@ export class CcHeaderOrga extends LitElement { : ''}
-
-
This content is slotted. You should keep it short because it's a header component.
+const DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT = `
+
`;
+
+const DEFAULT_SLOTTED_CONTENT_FOOTER_RIGHT = `This content is slotted on the left footer side.
+
+
`;
export const defaultStory = makeStory(conf, {
@@ -88,7 +92,7 @@ export const dataLoadedWithClassicClientAndSlottedContent = makeStory(conf, {
cleverEnterprise: false,
emergencyNumber: null,
},
- innerHTML: DEFAULT_SLOTTED_CONTENT,
+ innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT,
},
],
});
@@ -128,7 +132,7 @@ export const dataLoadedWithEnterpriseClientAndSlottedContent = makeStory(conf, {
...DEFAULT_ORGA_STATE,
emergencyNumber: null,
},
- innerHTML: DEFAULT_SLOTTED_CONTENT,
+ innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT,
},
],
});
@@ -147,38 +151,43 @@ export const dataLoadedWithEnterpriseClientEmergencyNumberAndSlottedContent = ma
{
/** @type {HeaderOrgaStateLoaded} */
state: DEFAULT_ORGA_STATE,
- innerHTML: DEFAULT_SLOTTED_CONTENT,
+ innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT,
},
],
});
-export const dataLoadedWithSlottedContentCustomStyling = makeStory(conf, {
- css: `
- [slot="footer"] {
- background-color: var(--cc-color-bg-primary);
- color: white;
- padding: 2em;
- margin: 0;
- border-top: solid 2px #000;
- }
- `,
+export const dataLoadedWithSlottedContentFooterLeft = makeStory(conf, {
+ items: [
+ {
+ /** @type {HeaderOrgaStateLoaded} */
+ state: DEFAULT_ORGA_STATE,
+ innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT,
+ },
+ ],
+});
+
+export const dataLoadedWithSlottedContentFooterRight = makeStory(conf, {
+ items: [
+ {
+ /** @type {HeaderOrgaStateLoaded} */
+ state: DEFAULT_ORGA_STATE,
+ innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_RIGHT,
+ },
+ ],
+});
+
+export const dataLoadedWithSlottedContentFooterLeftAndRight = makeStory(conf, {
items: [
{
/** @type {HeaderOrgaStateLoaded} */
state: DEFAULT_ORGA_STATE,
- innerHTML: `
- This content is slotted on the right footer side.
-
- `,
+ innerHTML: [DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT, DEFAULT_SLOTTED_CONTENT_FOOTER_RIGHT],
},
],
});
export const simulations = makeStory(conf, {
- items: [{}, {}, { innerHTML: DEFAULT_SLOTTED_CONTENT }, {}],
+ items: [{}, {}, { innerHTML: DEFAULT_SLOTTED_CONTENT_FOOTER_LEFT }, {}],
simulations: [
storyWait(
3000,
diff --git a/src/components/cc-heptapod-info/cc-heptapod-info.js b/src/components/cc-heptapod-info/cc-heptapod-info.js
index 9690e1f35..6b4816465 100644
--- a/src/components/cc-heptapod-info/cc-heptapod-info.js
+++ b/src/components/cc-heptapod-info/cc-heptapod-info.js
@@ -1,5 +1,6 @@
import { css, html, LitElement } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
import { skeletonStyles } from '../../styles/skeleton.js';
import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
@@ -14,6 +15,7 @@ const SKELETON_STATISTICS = {
price: 17.5,
};
+const HEPTAPOD_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/addons/heptapod/';
const HEPTAPOD_LOGO_URL = 'https://assets.clever-cloud.com/logos/heptapod.svg';
/**
@@ -45,24 +47,37 @@ export class CcHeptapodInfo extends LitElement {
render() {
return html`
The slotted content container has a default styling: background-color, padding and border-top.
You may change any of these by styling the tag on which you have added the slot="footer" attribute.
Caution: the default styling was designed to remain consistent with the header body and avoid drawing too much attention to it. You should stick to the default styling as much as possible and stay as close as possible to it. This example is only here to demo that anything can be customized. -
Heptapod
-
+
-
Heptapod
+ Heptapod
${ccLink('https://heptapod.host', 'https://heptapod.host')}
${i18n('cc-heptapod-info.description')}
+ ${i18n('cc-heptapod-info.description')}
${this.state.type === 'error'
- ? html` ${i18n('cc-heptapod-info.not-in-use')}
`
+ ? html` ${i18n('cc-heptapod-info.not-in-use')}
`
: ''}
${this.state.type === 'loading' ? this._renderStatistics(SKELETON_STATISTICS, true) : ''}
${this.state.type === 'loaded' ? this._renderStatistics(this.state.statistics, false) : ''}
+
+
+ ${ccLink(
+ `${HEPTAPOD_DOCUMENTATION}`,
+ html`
`;
}
@@ -74,7 +89,7 @@ export class CcHeptapodInfo extends LitElement {
*/
_renderStatistics(statistics, skeleton) {
return html`
-
+
+
-
+
@@ -122,7 +125,7 @@ export class CcInvoiceList extends LitElement {
const hasYearSelector = filteredProcessedInvoiceTableState.invoices.length > 0 && yearChoices.length > 1;
return this._renderView(html`
-
+
+
`
: ''}
-
+
-
`;
}
static get styles() {
return [
+ linkStyles,
// language=CSS
css`
:host {
@@ -212,6 +222,12 @@ export class CcInvoiceList extends LitElement {
color: var(--cc-color-text-weak);
font-style: italic;
}
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-invoice/cc-invoice.js b/src/components/cc-invoice/cc-invoice.js
index 7ccd441b1..cf9bcc1ee 100644
--- a/src/components/cc-invoice/cc-invoice.js
+++ b/src/components/cc-invoice/cc-invoice.js
@@ -51,17 +51,17 @@ export class CcInvoice extends LitElement {
return html`
-
${statistics.privateActiveUsers}
${i18n('cc-heptapod-info.private-active-users-description')}
@@ -162,6 +177,12 @@ export class CcHeptapodInfo extends LitElement {
background-color: #bbb;
color: transparent;
}
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-invoice-list/cc-invoice-list.js b/src/components/cc-invoice-list/cc-invoice-list.js
index a17ebb4fd..9672deb05 100644
--- a/src/components/cc-invoice-list/cc-invoice-list.js
+++ b/src/components/cc-invoice-list/cc-invoice-list.js
@@ -1,6 +1,8 @@
import { css, html, LitElement } from 'lit';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
import { ResizeController } from '../../controllers/resize-controller.js';
import { sortBy, unique } from '../../lib/utils.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
import '../cc-block-section/cc-block-section.js';
import '../cc-block/cc-block.js';
@@ -11,6 +13,7 @@ import '../cc-select/cc-select.js';
import '../cc-toggle/cc-toggle.js';
const BREAKPOINTS = [520];
+const INVOICE_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/billing/unified-invoices/';
/**
* @param {string} dateString
@@ -75,18 +78,18 @@ export class CcInvoiceList extends LitElement {
render() {
if (this.state.type === 'error') {
return this._renderView(html`
- ${i18n('cc-invoice-list.pending')}
${i18n('cc-invoice-list.processed')}
${i18n('cc-invoice-list.pending')}
${pendingInvoicesTableState.invoices.length > 0
? html` ${i18n('cc-invoice-list.processing')}
${i18n('cc-invoice-list.processed')}
${hasYearSelector
? html`
@@ -178,14 +181,21 @@ export class CcInvoiceList extends LitElement {
_renderView(content) {
return html`
${i18n('cc-invoice-list.title')}
+ ${i18n('cc-invoice-list.title')}
${content}
+
+ ${ccLink(
+ `${INVOICE_DOCUMENTATION}`,
+ html`
+
${skeletonNumber ? html` ${i18n('cc-invoice.title')} ${number} ` : title}
${this.state.type === 'error'
- ? html` ${ccLink(invoice.downloadUrl, i18n('cc-invoice.download-pdf'), skeleton)}
-
+
+
${invoice.invoiceHtml != null ? unsafeHTML(`${invoice.invoiceHtml}`) : ''}
`
@@ -106,16 +106,19 @@ export class CcInvoice extends LitElement {
background-color: #bbb;
}
- .info,
- .frame {
- justify-self: center;
+ .info {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1em;
}
.frame {
/* height and max-width are roughly set to have a standard letter / A4 paper ratio */
box-shadow: 0 0 0.5em rgb(0 0 0 / 40%);
height: 31cm;
+ margin-inline: auto;
max-width: 22cm;
+ padding-inline: 1em;
width: 100%;
}
`,
diff --git a/src/components/cc-jenkins-info/cc-jenkins-info.js b/src/components/cc-jenkins-info/cc-jenkins-info.js
index 7c91ce034..1aea12fe5 100644
--- a/src/components/cc-jenkins-info/cc-jenkins-info.js
+++ b/src/components/cc-jenkins-info/cc-jenkins-info.js
@@ -48,10 +48,11 @@ export class CcJenkinsInfo extends LitElement {
const hasNewVersion = versions.current !== versions.available;
return html`
-
-
+
+
-
-
-
-
+
+
+
`;
}
diff --git a/src/components/cc-matomo-info/cc-matomo-info.js b/src/components/cc-matomo-info/cc-matomo-info.js
index 6b3c2e128..30d5b08e5 100644
--- a/src/components/cc-matomo-info/cc-matomo-info.js
+++ b/src/components/cc-matomo-info/cc-matomo-info.js
@@ -53,10 +53,11 @@ export class CcMatomoInfo extends LitElement {
}
return html`
-
-
+
+
-
-
-
-
+
+
+
`;
}
@@ -106,28 +108,6 @@ export class CcMatomoInfo extends LitElement {
`;
}
- /**
- * @param {IconModel} icon
- * @param {string} linkUrl
- * @param {string} linkText
- * @parma {boolean} skeleton
- * @returns {TemplateResult}
- * @private
- */
- _renderIconLink(icon, linkUrl, linkText) {
- return html`
-
-
+
${ccLink(invoice.downloadUrl, i18n('cc-invoice.download-pdf'), skeleton)}
+
${i18n('cc-invoice.info', {
date: invoice.emissionDate,
@@ -70,7 +70,7 @@ export class CcInvoice extends LitElement {
})}
- ${i18n('cc-jenkins-info.text')}
+ ${i18n('cc-jenkins-info.info')}
+ ${i18n('cc-jenkins-info.text')}
- ${i18n('cc-jenkins-info.open-jenkins.title')}
${i18n('cc-jenkins-info.open-jenkins.text')}
@@ -65,21 +66,7 @@ export class CcJenkinsInfo extends LitElement {
${i18n('cc-jenkins-info.documentation.title')}
- ${i18n('cc-jenkins-info.documentation.text')}
-
- ${ccLink(
- JENKINS_DOCUMENTATION,
- html`
-
- ${i18n('cc-jenkins-info.update.title')}
${i18n('cc-jenkins-info.update.text')}
@@ -96,6 +83,13 @@ export class CcJenkinsInfo extends LitElement {
)}
+ ${ccLink(
+ `${JENKINS_DOCUMENTATION}`,
+ html`
${i18n('cc-matomo-info.heading')}
+ ${i18n('cc-matomo-info.info')}
+ ${i18n('cc-matomo-info.heading')}
- ${i18n('cc-matomo-info.open-matomo.title')}
${i18n('cc-matomo-info.open-matomo.text')}
@@ -64,13 +65,7 @@ export class CcMatomoInfo extends LitElement {
${i18n('cc-matomo-info.documentation.title')}
- ${i18n('cc-matomo-info.documentation.text')}
- ${this._renderIconLink(iconInfo, MATOMO_DOCUMENTATION, i18n('cc-matomo-info.documentation.link'))}
- ${i18n('cc-matomo-info.about.title')}
${i18n('cc-matomo-info.about.text')}
@@ -79,6 +74,13 @@ export class CcMatomoInfo extends LitElement {
${this._renderImageLink(REDIS_LOGO_URL, redisUrl, i18n('cc-matomo-info.link.redis'), skeleton)}
+ ${ccLink(
+ `${MATOMO_DOCUMENTATION}`,
+ html`
- ${ccLink(
- linkUrl,
- html`
-
- `;
- }
-
static get styles() {
return [
skeletonStyles,
diff --git a/src/components/cc-orga-member-list/cc-orga-member-list.js b/src/components/cc-orga-member-list/cc-orga-member-list.js
index 10238c238..a7021de19 100644
--- a/src/components/cc-orga-member-list/cc-orga-member-list.js
+++ b/src/components/cc-orga-member-list/cc-orga-member-list.js
@@ -2,11 +2,12 @@ import { css, html, LitElement } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { repeat } from 'lit/directives/repeat.js';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
import { LostFocusController } from '../../controllers/lost-focus-controller.js';
import { dispatchCustomEvent } from '../../lib/events.js';
import { formSubmit } from '../../lib/form/form-submit-directive.js';
import { Validation } from '../../lib/form/validation.js';
-import { linkStyles } from '../../templates/cc-link/cc-link.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
import '../cc-badge/cc-badge.js';
import '../cc-block-section/cc-block-section.js';
@@ -18,6 +19,8 @@ import '../cc-notice/cc-notice.js';
import { CcOrgaMemberCard } from '../cc-orga-member-card/cc-orga-member-card.js';
import '../cc-select/cc-select.js';
+const ORGA_MEMBER_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/account/administrate-organization/';
+
/**
* @typedef {import('./cc-orga-member-list.types.js').OrgaMemberListState} OrgaMemberListState
* @typedef {import('./cc-orga-member-list.types.js').OrgaMemberListStateLoaded} OrgaMemberListStateLoaded
@@ -333,11 +336,11 @@ export class CcOrgaMemberList extends LitElement {
render() {
return html`
${i18n('cc-orga-member-list.main-heading')}
+ ${i18n('cc-orga-member-list.main-heading')}
${this.authorisations.invite ? this._renderInviteForm() : ''}
-
${i18n('cc-orga-member-list.list.heading')}
${this.members.state === 'loaded'
@@ -363,6 +366,13 @@ export class CcOrgaMemberList extends LitElement {
${this.members.state === 'loaded' ? this._renderDangerZone(this.members) : ''}
+
+
+
+
-
+
-
+
+ ${ccLink(
+ ORGA_MEMBER_DOCUMENTATION,
+ html`
`;
}
@@ -371,7 +381,7 @@ export class CcOrgaMemberList extends LitElement {
const isFormDisabled = this.inviteMemberFormState.type === 'inviting';
return html`
- ${i18n('cc-orga-member-list.invite.heading')}
${i18n('cc-orga-member-list.invite.info')}
@@ -471,7 +481,7 @@ export class CcOrgaMemberList extends LitElement { */ _renderDangerZone(members) { return html` -${i18n('cc-orga-member-list.leave.heading')}
${i18n('cc-orga-member-list.leave.text')}
@@ -623,6 +633,12 @@ export class CcOrgaMemberList extends LitElement { justify-content: end; } /* endregion */ + + [slot='footer-right'] .cc-link { + align-items: center; + display: flex; + gap: 0.5em; + } `, ]; } diff --git a/src/components/cc-ssh-key-list/cc-ssh-key-list.js b/src/components/cc-ssh-key-list/cc-ssh-key-list.js index b2ebb1f60..fe74efde0 100644 --- a/src/components/cc-ssh-key-list/cc-ssh-key-list.js +++ b/src/components/cc-ssh-key-list/cc-ssh-key-list.js @@ -5,6 +5,7 @@ import { repeat } from 'lit/directives/repeat.js'; import { iconRemixAddCircleFill as iconAdd, iconRemixDeleteBin_5Fill as iconBin, + iconRemixInformationFill as iconInfo, iconRemixKey_2Fill as iconKey, } from '../../assets/cc-remix.icons.js'; import { LostFocusController } from '../../controllers/lost-focus-controller.js'; @@ -15,6 +16,7 @@ import { formSubmit } from '../../lib/form/form-submit-directive.js'; import { Validation } from '../../lib/form/validation.js'; import { sortBy } from '../../lib/utils.js'; import { skeletonStyles } from '../../styles/skeleton.js'; +import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js'; import { i18n } from '../../translations/translation.js'; import '../cc-badge/cc-badge.js'; import '../cc-block-section/cc-block-section.js'; @@ -25,6 +27,8 @@ import '../cc-img/cc-img.js'; import '../cc-input-text/cc-input-text.js'; import '../cc-notice/cc-notice.js'; +const SSH_KEY_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/account/ssh-keys-management/'; + /** * @type {SshKeyState[]} */ @@ -151,10 +155,10 @@ export class CcSshKeyList extends LitElement { render() { return html`${i18n('cc-ssh-key-list.title')}
+ ${i18n('cc-ssh-key-list.title')}
- ${i18n('cc-ssh-key-list.add.title')}
${i18n('cc-ssh-key-list.add.info')}
@@ -162,7 +166,7 @@ export class CcSshKeyList extends LitElement {
${i18n('cc-ssh-key-list.personal.title')}
${this.keyData.state === 'loaded' && this.keyData.personalKeys.length > 2
@@ -190,7 +194,7 @@ export class CcSshKeyList extends LitElement {
-
+
${i18n('cc-ssh-key-list.github.title')}
${this.keyData.state === 'loaded' && this.keyData.isGithubLinked && this.keyData.githubKeys.length > 2
@@ -220,10 +224,12 @@ export class CcSshKeyList extends LitElement {
: ''}
-
-
-
+
-
+
`;
}
@@ -106,6 +119,11 @@ export class CcTcpRedirectionForm extends LitElement {
vertical-align: middle;
}
+ .content {
+ display: grid;
+ gap: 1em;
+ }
+
.description {
line-height: 1.6;
}
@@ -121,6 +139,17 @@ export class CcTcpRedirectionForm extends LitElement {
font-family: var(--cc-ff-monospace);
padding: 0.15em 0.3em;
}
+
+ .empty-msg {
+ color: var(--cc-color-text-weak);
+ font-style: italic;
+ }
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-toaster/cc-toaster.stories.js b/src/components/cc-toaster/cc-toaster.stories.js
index f4efb1b7e..8b3a4bfce 100644
--- a/src/components/cc-toaster/cc-toaster.stories.js
+++ b/src/components/cc-toaster/cc-toaster.stories.js
@@ -197,21 +197,21 @@ export const defaultStory = makeStory(conf, {
return html`
-
-
${i18n('cc-ssh-key-list.doc.info')}
-
+ ${ccLink(
+ SSH_KEY_DOCUMENTATION,
+ html`
`;
}
@@ -347,6 +353,7 @@ export class CcSshKeyList extends LitElement {
static get styles() {
return [
skeletonStyles,
+ linkStyles,
// language=CSS
css`
/* region global */
@@ -475,10 +482,13 @@ export class CcSshKeyList extends LitElement {
margin-top: 1em;
}
- .align-end {
- text-align: end;
- }
/* endregion */
+
+ [slot='footer-right'] .cc-link {
+ align-items: center;
+ display: flex;
+ gap: 0.5em;
+ }
`,
];
}
diff --git a/src/components/cc-tcp-redirection-form/cc-tcp-redirection-form.js b/src/components/cc-tcp-redirection-form/cc-tcp-redirection-form.js
index c7d27100c..1b26d3045 100644
--- a/src/components/cc-tcp-redirection-form/cc-tcp-redirection-form.js
+++ b/src/components/cc-tcp-redirection-form/cc-tcp-redirection-form.js
@@ -1,11 +1,14 @@
import { css, html, LitElement } from 'lit';
-import { linkStyles } from '../../templates/cc-link/cc-link.js';
+import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
+import { ccLink, linkStyles } from '../../templates/cc-link/cc-link.js';
import { i18n } from '../../translations/translation.js';
import '../cc-badge/cc-badge.js';
import '../cc-block/cc-block.js';
import '../cc-notice/cc-notice.js';
import '../cc-tcp-redirection/cc-tcp-redirection.js';
+const TCP_REDIRECTION_DOCUMENTATION = 'https://developers.clever-cloud.com/doc/administrate/tcp-redirections/';
+
/** @type {TcpRedirectionStateLoading[]} */
const SKELETON_REDIRECTIONS = [{ type: 'loading' }, { type: 'loading' }];
@@ -15,6 +18,7 @@ const SKELETON_REDIRECTIONS = [{ type: 'loading' }, { type: 'loading' }];
* @typedef {import('../cc-tcp-redirection/cc-tcp-redirection.types.js').TcpRedirectionStateLoading} TcpRedirectionStateLoading
* @typedef {import('../cc-tcp-redirection/cc-tcp-redirection.types.js').CreateTcpRedirection} CreateTcpRedirection
* @typedef {import('../cc-tcp-redirection/cc-tcp-redirection.types.js').DeleteTcpRedirection} DeleteTcpRedirection
+ * @typedef {import('../cc-block/cc-block.types.js').BlockToggleState} BlockToggleState
*/
/**
@@ -44,37 +48,46 @@ export class CcTcpRedirectionForm extends LitElement {
}
render() {
+ /** @type {BlockToggleState} blockState */
const blockState = this.context === 'admin' ? 'close' : 'off';
return html`
- ${i18n('cc-tcp-redirection-form.title')} ${this._renderRedirectionCountBadge()}
-
- ${this.context === 'user'
- ? html` ${i18n('cc-tcp-redirection-form.description')}
`
- : ''}
- ${this.state.type === 'error'
- ? html` ${i18n('cc-tcp-redirection-form.empty')}
`
- : ''}
- `
- : ''}
+ ${i18n('cc-tcp-redirection-form.title')} ${this._renderRedirectionCountBadge()}
+
+ ${this.context === 'user'
+ ? html`
+
+ ${i18n('cc-tcp-redirection-form.description')}
`
+ : ''}
+ ${this.state.type === 'error'
+ ? html` ${i18n('cc-tcp-redirection-form.empty')}
`
+ : ''}
+ `
+ : ''}
+
+ ${ccLink(
+ `${TCP_REDIRECTION_DOCUMENTATION}`,
+ html`
Click on buttons to trigger a toast
-${intents.map(_renderButton)}
+ Click on buttons to trigger a toast
+${intents.map(_renderButton)}
Options
+ Options
-
+
+
+
+
+