Skip to content

Commit b1ba428

Browse files
macandcheesemacandcheese
authored
feat(carousel): Add Carousel and Carousel Item components (#8995)
**Related Issue:** #6536 ## Summary Once this and any necessary follow up lands, we can plan to deprecate `Tip Manager` and associated components.
1 parent e8478de commit b1ba428

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3435
-0
lines changed

‎packages/calcite-components/src/components.d.ts

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { BlockSectionMessages } from "./components/block-section/assets/block-se
2323
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
2424
import { ButtonMessages } from "./components/button/assets/button/t9n";
2525
import { CardMessages } from "./components/card/assets/card/t9n";
26+
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
27+
import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
2628
import { ChipMessages } from "./components/chip/assets/chip/t9n";
2729
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
2830
import { Format } from "./components/color-picker/utils";
@@ -110,6 +112,8 @@ export { BlockSectionMessages } from "./components/block-section/assets/block-se
110112
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
111113
export { ButtonMessages } from "./components/button/assets/button/t9n";
112114
export { CardMessages } from "./components/card/assets/card/t9n";
115+
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
116+
export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
113117
export { ChipMessages } from "./components/chip/assets/chip/t9n";
114118
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
115119
export { Format } from "./components/color-picker/utils";
@@ -826,6 +830,71 @@ export namespace Components {
826830
*/
827831
"setFocus": () => Promise<void>;
828832
}
833+
interface CalciteCarousel {
834+
/**
835+
* Specifies how and if the "previous" and "next" arrows are displayed.
836+
*/
837+
"arrowType": ArrowType;
838+
/**
839+
* When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed.
840+
*/
841+
"autoplay": AutoplayType;
842+
/**
843+
* When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.
844+
*/
845+
"autoplayDuration": number;
846+
/**
847+
* Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.
848+
*/
849+
"controlOverlay": boolean;
850+
/**
851+
* When `true`, interaction is prevented and the component is displayed with lower opacity.
852+
*/
853+
"disabled": boolean;
854+
/**
855+
* Accessible name for the component.
856+
*/
857+
"label": string;
858+
/**
859+
* Use this property to override individual strings used by the component.
860+
*/
861+
"messageOverrides": Partial<CarouselMessages>;
862+
/**
863+
* Made into a prop for testing purposes only
864+
*/
865+
"messages": CarouselMessages;
866+
/**
867+
* Made into a prop for testing purposes only
868+
*/
869+
"paused": boolean;
870+
/**
871+
* Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect.
872+
*/
873+
"play": () => Promise<void>;
874+
/**
875+
* The component's selected `calcite-carousel-item`.
876+
* @readonly
877+
*/
878+
"selectedItem": HTMLCalciteCarouselItemElement;
879+
/**
880+
* Sets focus on the component.
881+
*/
882+
"setFocus": () => Promise<void>;
883+
/**
884+
* Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect.
885+
*/
886+
"stop": () => Promise<void>;
887+
}
888+
interface CalciteCarouselItem {
889+
/**
890+
* Accessible name for the component.
891+
*/
892+
"label": string;
893+
/**
894+
* When `true`, the component is selected.
895+
*/
896+
"selected": boolean;
897+
}
829898
interface CalciteCheckbox {
830899
/**
831900
* When `true`, the component is checked.
@@ -5484,6 +5553,10 @@ export interface CalciteCardGroupCustomEvent<T> extends CustomEvent<T> {
54845553
detail: T;
54855554
target: HTMLCalciteCardGroupElement;
54865555
}
5556+
export interface CalciteCarouselCustomEvent<T> extends CustomEvent<T> {
5557+
detail: T;
5558+
target: HTMLCalciteCarouselElement;
5559+
}
54875560
export interface CalciteCheckboxCustomEvent<T> extends CustomEvent<T> {
54885561
detail: T;
54895562
target: HTMLCalciteCheckboxElement;
@@ -5962,6 +6035,33 @@ declare global {
59626035
prototype: HTMLCalciteCardGroupElement;
59636036
new (): HTMLCalciteCardGroupElement;
59646037
};
6038+
interface HTMLCalciteCarouselElementEventMap {
6039+
"calciteCarouselChange": void;
6040+
"calciteCarouselPlay": void;
6041+
"calciteCarouselStop": void;
6042+
"calciteCarouselPause": void;
6043+
"calciteCarouselResume": void;
6044+
}
6045+
interface HTMLCalciteCarouselElement extends Components.CalciteCarousel, HTMLStencilElement {
6046+
addEventListener<K extends keyof HTMLCalciteCarouselElementEventMap>(type: K, listener: (this: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent<HTMLCalciteCarouselElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
6047+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
6048+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
6049+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
6050+
removeEventListener<K extends keyof HTMLCalciteCarouselElementEventMap>(type: K, listener: (this: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent<HTMLCalciteCarouselElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
6051+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
6052+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
6053+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
6054+
}
6055+
var HTMLCalciteCarouselElement: {
6056+
prototype: HTMLCalciteCarouselElement;
6057+
new (): HTMLCalciteCarouselElement;
6058+
};
6059+
interface HTMLCalciteCarouselItemElement extends Components.CalciteCarouselItem, HTMLStencilElement {
6060+
}
6061+
var HTMLCalciteCarouselItemElement: {
6062+
prototype: HTMLCalciteCarouselItemElement;
6063+
new (): HTMLCalciteCarouselItemElement;
6064+
};
59656065
interface HTMLCalciteCheckboxElementEventMap {
59666066
"calciteInternalCheckboxBlur": boolean;
59676067
"calciteCheckboxChange": void;
@@ -7445,6 +7545,8 @@ declare global {
74457545
"calcite-button": HTMLCalciteButtonElement;
74467546
"calcite-card": HTMLCalciteCardElement;
74477547
"calcite-card-group": HTMLCalciteCardGroupElement;
7548+
"calcite-carousel": HTMLCalciteCarouselElement;
7549+
"calcite-carousel-item": HTMLCalciteCarouselItemElement;
74487550
"calcite-checkbox": HTMLCalciteCheckboxElement;
74497551
"calcite-chip": HTMLCalciteChipElement;
74507552
"calcite-chip-group": HTMLCalciteChipGroupElement;
@@ -8213,6 +8315,79 @@ declare namespace LocalJSX {
82138315
SelectionMode
82148316
>;
82158317
}
8318+
interface CalciteCarousel {
8319+
/**
8320+
* Specifies how and if the "previous" and "next" arrows are displayed.
8321+
*/
8322+
"arrowType"?: ArrowType;
8323+
/**
8324+
* When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed.
8325+
*/
8326+
"autoplay"?: AutoplayType;
8327+
/**
8328+
* When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.
8329+
*/
8330+
"autoplayDuration"?: number;
8331+
/**
8332+
* Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.
8333+
*/
8334+
"controlOverlay"?: boolean;
8335+
/**
8336+
* When `true`, interaction is prevented and the component is displayed with lower opacity.
8337+
*/
8338+
"disabled"?: boolean;
8339+
/**
8340+
* Accessible name for the component.
8341+
*/
8342+
"label": string;
8343+
/**
8344+
* Use this property to override individual strings used by the component.
8345+
*/
8346+
"messageOverrides"?: Partial<CarouselMessages>;
8347+
/**
8348+
* Made into a prop for testing purposes only
8349+
*/
8350+
"messages"?: CarouselMessages;
8351+
/**
8352+
* Fires when the selected `calcite-carousel-item` changes.
8353+
*/
8354+
"onCalciteCarouselChange"?: (event: CalciteCarouselCustomEvent<void>) => void;
8355+
/**
8356+
* Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content
8357+
*/
8358+
"onCalciteCarouselPause"?: (event: CalciteCarouselCustomEvent<void>) => void;
8359+
/**
8360+
* Fires when the carousel autoplay is invoked by the user.
8361+
*/
8362+
"onCalciteCarouselPlay"?: (event: CalciteCarouselCustomEvent<void>) => void;
8363+
/**
8364+
* Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content
8365+
*/
8366+
"onCalciteCarouselResume"?: (event: CalciteCarouselCustomEvent<void>) => void;
8367+
/**
8368+
* Fires when the carousel autoplay state is stopped by a user.
8369+
*/
8370+
"onCalciteCarouselStop"?: (event: CalciteCarouselCustomEvent<void>) => void;
8371+
/**
8372+
* Made into a prop for testing purposes only
8373+
*/
8374+
"paused"?: boolean;
8375+
/**
8376+
* The component's selected `calcite-carousel-item`.
8377+
* @readonly
8378+
*/
8379+
"selectedItem"?: HTMLCalciteCarouselItemElement;
8380+
}
8381+
interface CalciteCarouselItem {
8382+
/**
8383+
* Accessible name for the component.
8384+
*/
8385+
"label": string;
8386+
/**
8387+
* When `true`, the component is selected.
8388+
*/
8389+
"selected"?: boolean;
8390+
}
82168391
interface CalciteCheckbox {
82178392
/**
82188393
* When `true`, the component is checked.
@@ -13081,6 +13256,8 @@ declare namespace LocalJSX {
1308113256
"calcite-button": CalciteButton;
1308213257
"calcite-card": CalciteCard;
1308313258
"calcite-card-group": CalciteCardGroup;
13259+
"calcite-carousel": CalciteCarousel;
13260+
"calcite-carousel-item": CalciteCarouselItem;
1308413261
"calcite-checkbox": CalciteCheckbox;
1308513262
"calcite-chip": CalciteChip;
1308613263
"calcite-chip-group": CalciteChipGroup;
@@ -13195,6 +13372,8 @@ declare module "@stencil/core" {
1319513372
"calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes<HTMLCalciteButtonElement>;
1319613373
"calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes<HTMLCalciteCardElement>;
1319713374
"calcite-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes<HTMLCalciteCardGroupElement>;
13375+
"calcite-carousel": LocalJSX.CalciteCarousel & JSXBase.HTMLAttributes<HTMLCalciteCarouselElement>;
13376+
"calcite-carousel-item": LocalJSX.CalciteCarouselItem & JSXBase.HTMLAttributes<HTMLCalciteCarouselItemElement>;
1319813377
"calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes<HTMLCalciteCheckboxElement>;
1319913378
"calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes<HTMLCalciteChipElement>;
1320013379
"calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes<HTMLCalciteChipGroupElement>;

‎packages/calcite-components/src/components/carousel-item/carousel-item.e2e.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { accessible, hidden, renders } from "../../tests/commonTests";
2+
3+
describe("calcite-carousel-item", () => {
4+
describe("renders", () => {
5+
renders("<calcite-carousel-item selected></calcite-carousel-item>", {
6+
display: "flex",
7+
});
8+
});
9+
10+
describe("honors hidden attribute", () => {
11+
hidden("calcite-carousel-item");
12+
});
13+
14+
describe("accessible", () => {
15+
accessible("calcite-carousel-item");
16+
});
17+
});

‎packages/calcite-components/src/components/carousel-item/carousel-item.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:host {
2+
@apply flex;
3+
}
4+
5+
.container {
6+
@apply hidden;
7+
inline-size: var(--calcite-container-size-content-fluid);
8+
}
9+
10+
:host([selected]) .container {
11+
@apply block;
12+
}
13+
14+
@include base-component();

‎packages/calcite-components/src/components/carousel-item/carousel-item.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Component, Element, h, Host, Prop, VNode } from "@stencil/core";
2+
import { guid } from "../../utils/guid";
3+
import { CSS } from "./resources";
4+
5+
/**
6+
* @slot - A slot for adding content.
7+
*/
8+
@Component({
9+
tag: "calcite-carousel-item",
10+
styleUrl: "carousel-item.scss",
11+
shadow: true,
12+
})
13+
export class CarouselItem {
14+
// --------------------------------------------------------------------------
15+
//
16+
// Properties
17+
//
18+
// --------------------------------------------------------------------------
19+
20+
/**
21+
* Accessible name for the component.
22+
*/
23+
@Prop() label!: string;
24+
25+
/**
26+
* When `true`, the component is selected.
27+
*/
28+
@Prop({ reflect: true }) selected = false;
29+
30+
// --------------------------------------------------------------------------
31+
//
32+
// Private Properties
33+
//
34+
// --------------------------------------------------------------------------
35+
36+
@Element() el: HTMLCalciteCarouselItemElement;
37+
38+
private guid = `calcite-carousel-item-${guid()}`;
39+
40+
// --------------------------------------------------------------------------
41+
//
42+
// Render Methods
43+
//
44+
// --------------------------------------------------------------------------
45+
46+
render(): VNode {
47+
const id = this.el.id || this.guid;
48+
return (
49+
<Host id={id}>
50+
<div
51+
aria-label={this.label}
52+
class={{ [CSS.container]: true, [CSS.selected]: this.selected }}
53+
role="tabpanel"
54+
>
55+
<slot />
56+
</div>
57+
</Host>
58+
);
59+
}
60+
}

‎packages/calcite-components/src/components/carousel-item/readme.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# calcite-carousel-item
2+
3+
<!-- Auto Generated Below -->
4+
5+
## Properties
6+
7+
| Property | Attribute | Description | Type | Default |
8+
| -------------------- | ---------- | ---------------------------------------------------------------------------------------- | --------------------- | ----------- |
9+
| `active` | `active` | When `true`, the component is active if it has a parent `calcite-carousel`. | `boolean` | `false` |
10+
| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` |
11+
| `label` *(required)* | `label` | The component label text. | `string` | `undefined` |
12+
| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` |
13+
14+
## Methods
15+
16+
### `setFocus() => Promise<void>`
17+
18+
Sets focus on the component.
19+
20+
#### Returns
21+
22+
Type: `Promise<void>`
23+
24+
## Slots
25+
26+
| Slot | Description |
27+
| ---- | -------------------------- |
28+
| | A slot for adding content. |
29+
30+
---
31+
32+
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/calcite-components/src/components/carousel-item/resources.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const CSS = {
2+
container: "container",
3+
selected: "selected",
4+
};

‎packages/calcite-components/src/components/carousel/assets/carousel/t9n/messages.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"previous": "Previous",
3+
"next": "Next",
4+
"play": "Play",
5+
"pause": "Pause",
6+
"carousel": "Carousel",
7+
"carouselItemProgress": "Progress indicator for Carousel Item"
8+
}

‎packages/calcite-components/src/components/carousel/assets/carousel/t9n/messages_ar.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"previous": "السابق",
3+
"next": "التالي",
4+
"play": "Play",
5+
"pause": "Pause",
6+
"carousel": "Carousel",
7+
"carouselItemProgress": "Progress indicator for Carousel Item"
8+
}

0 commit comments

Comments
 (0)