Skip to content

Commit cd7b4c3

Browse files
zimegzimeg
authored
feat(block-kit): add carousel block example (#97)
1 parent d4bd33b commit cd7b4c3

3 files changed

Lines changed: 239 additions & 0 deletions

File tree

‎block-kit/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Read the [docs](https://docs.slack.dev/block-kit/) to learn concepts behind thes
1111
- **[Actions](https://docs.slack.dev/reference/block-kit/blocks/actions-block)**: Holds multiple interactive elements. [Implementation](./src/blocks/actions.py).
1212
- **[Alert](https://docs.slack.dev/reference/block-kit/blocks/alert-block)**: Displays alerts, warnings, and informational messages. [Implementation](./src/blocks/alert.py).
1313
- **[Card](https://docs.slack.dev/reference/block-kit/blocks/card-block)**: Displays content in a card. [Implementation](./src/blocks/card.py).
14+
- **[Carousel](https://docs.slack.dev/reference/block-kit/blocks/carousel-block)**: Displays related card blocks in a horizontally-scrolling container. [Implementation](./src/blocks/carousel.py).
1415
- **[Context](https://docs.slack.dev/reference/block-kit/blocks/context-block)**: Provides contextual info, which can include both images and text. [Implementation](./src/blocks/context.py).
1516
- **[Context actions](https://docs.slack.dev/reference/block-kit/blocks/context-actions-block)**: Displays actions as contextual info, which can include both feedback buttons and icon buttons. [Implementation](./src/blocks/context_actions.py).
1617
- **[Divider](https://docs.slack.dev/reference/block-kit/blocks/divider-block)**: Visually separates pieces of info inside of a message. [Implementation](./src/blocks/divider.py).

‎block-kit/src/blocks/carousel.py‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
from slack_sdk.models.blocks import CardBlock, CarouselBlock
2+
from slack_sdk.models.blocks.basic_components import MarkdownTextObject, PlainTextObject
3+
from slack_sdk.models.blocks.block_elements import ButtonElement, ImageElement
4+
5+
6+
def example01() -> CarouselBlock:
7+
"""
8+
Displays related card blocks in a horizontally-scrolling container.
9+
https://docs.slack.dev/reference/block-kit/blocks/carousel-block/
10+
11+
A sample carousel block.
12+
"""
13+
block = CarouselBlock(
14+
elements=[
15+
CardBlock(
16+
block_id="carousel-card-1",
17+
icon=ImageElement(
18+
image_url="https://picsum.photos/36/36",
19+
alt_text="Icon",
20+
),
21+
title=MarkdownTextObject(
22+
text="MDR",
23+
verbatim=False,
24+
),
25+
subtitle=MarkdownTextObject(
26+
text="Refining data files",
27+
verbatim=False,
28+
),
29+
hero_image=ImageElement(
30+
image_url="https://picsum.photos/400/300",
31+
alt_text="Sample hero image",
32+
),
33+
body=MarkdownTextObject(
34+
text="Blue badge required to gain access.",
35+
verbatim=False,
36+
),
37+
actions=[
38+
ButtonElement(
39+
text=PlainTextObject(text="Action Button", emoji=False),
40+
action_id="button_action_1",
41+
)
42+
],
43+
),
44+
CardBlock(
45+
block_id="carousel-card-2",
46+
icon=ImageElement(
47+
image_url="https://picsum.photos/36/36",
48+
alt_text="Icon",
49+
),
50+
title=MarkdownTextObject(
51+
text="O&D",
52+
verbatim=False,
53+
),
54+
subtitle=MarkdownTextObject(
55+
text="Storage, maintenance, and rotation of art pieces",
56+
verbatim=False,
57+
),
58+
hero_image=ImageElement(
59+
image_url="https://picsum.photos/400/300",
60+
alt_text="Sample hero image",
61+
),
62+
body=MarkdownTextObject(
63+
text="Green badge required to gain access.",
64+
verbatim=False,
65+
),
66+
actions=[
67+
ButtonElement(
68+
text=PlainTextObject(text="Action Button", emoji=False),
69+
action_id="button_action_2",
70+
)
71+
],
72+
),
73+
CardBlock(
74+
block_id="carousel-card-3",
75+
icon=ImageElement(
76+
image_url="https://picsum.photos/36/36",
77+
alt_text="Icon",
78+
),
79+
title=MarkdownTextObject(
80+
text="Wellness Center",
81+
verbatim=False,
82+
),
83+
subtitle=MarkdownTextObject(
84+
text="Wellness sessions",
85+
verbatim=False,
86+
),
87+
hero_image=ImageElement(
88+
image_url="https://picsum.photos/400/300",
89+
alt_text="Sample hero image",
90+
),
91+
body=MarkdownTextObject(
92+
text="Please take a seat in the waiting room until called.",
93+
verbatim=False,
94+
),
95+
actions=[
96+
ButtonElement(
97+
text=PlainTextObject(text="Action Button", emoji=False),
98+
action_id="button_action_3",
99+
)
100+
],
101+
),
102+
],
103+
)
104+
return block

‎block-kit/tests/blocks/test_carousel.py‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import json
2+
3+
from src.blocks import carousel
4+
5+
6+
def test_example01():
7+
block = carousel.example01()
8+
actual = block.to_dict()
9+
expected = {
10+
"type": "carousel",
11+
"elements": [
12+
{
13+
"type": "card",
14+
"block_id": "carousel-card-1",
15+
"icon": {
16+
"type": "image",
17+
"image_url": "https://picsum.photos/36/36",
18+
"alt_text": "Icon",
19+
},
20+
"title": {
21+
"type": "mrkdwn",
22+
"text": "MDR",
23+
"verbatim": False,
24+
},
25+
"subtitle": {
26+
"type": "mrkdwn",
27+
"text": "Refining data files",
28+
"verbatim": False,
29+
},
30+
"hero_image": {
31+
"type": "image",
32+
"image_url": "https://picsum.photos/400/300",
33+
"alt_text": "Sample hero image",
34+
},
35+
"body": {
36+
"type": "mrkdwn",
37+
"text": "Blue badge required to gain access.",
38+
"verbatim": False,
39+
},
40+
"actions": [
41+
{
42+
"type": "button",
43+
"text": {
44+
"type": "plain_text",
45+
"text": "Action Button",
46+
"emoji": False,
47+
},
48+
"action_id": "button_action_1",
49+
}
50+
],
51+
},
52+
{
53+
"type": "card",
54+
"block_id": "carousel-card-2",
55+
"icon": {
56+
"type": "image",
57+
"image_url": "https://picsum.photos/36/36",
58+
"alt_text": "Icon",
59+
},
60+
"title": {
61+
"type": "mrkdwn",
62+
"text": "O&D",
63+
"verbatim": False,
64+
},
65+
"subtitle": {
66+
"type": "mrkdwn",
67+
"text": "Storage, maintenance, and rotation of art pieces",
68+
"verbatim": False,
69+
},
70+
"hero_image": {
71+
"type": "image",
72+
"image_url": "https://picsum.photos/400/300",
73+
"alt_text": "Sample hero image",
74+
},
75+
"body": {
76+
"type": "mrkdwn",
77+
"text": "Green badge required to gain access.",
78+
"verbatim": False,
79+
},
80+
"actions": [
81+
{
82+
"type": "button",
83+
"text": {
84+
"type": "plain_text",
85+
"text": "Action Button",
86+
"emoji": False,
87+
},
88+
"action_id": "button_action_2",
89+
}
90+
],
91+
},
92+
{
93+
"type": "card",
94+
"block_id": "carousel-card-3",
95+
"icon": {
96+
"type": "image",
97+
"image_url": "https://picsum.photos/36/36",
98+
"alt_text": "Icon",
99+
},
100+
"title": {
101+
"type": "mrkdwn",
102+
"text": "Wellness Center",
103+
"verbatim": False,
104+
},
105+
"subtitle": {
106+
"type": "mrkdwn",
107+
"text": "Wellness sessions",
108+
"verbatim": False,
109+
},
110+
"hero_image": {
111+
"type": "image",
112+
"image_url": "https://picsum.photos/400/300",
113+
"alt_text": "Sample hero image",
114+
},
115+
"body": {
116+
"type": "mrkdwn",
117+
"text": "Please take a seat in the waiting room until called.",
118+
"verbatim": False,
119+
},
120+
"actions": [
121+
{
122+
"type": "button",
123+
"text": {
124+
"type": "plain_text",
125+
"text": "Action Button",
126+
"emoji": False,
127+
},
128+
"action_id": "button_action_3",
129+
}
130+
],
131+
},
132+
],
133+
}
134+
assert json.dumps(actual, sort_keys=True) == json.dumps(expected, sort_keys=True)

0 commit comments

Comments
 (0)