Skip to content

Commit 9abd9ad

Browse files
raoufsweraoufswe
committed
feat(pie-docs): DSW-2616 add the code section of the thumbnail component
1 parent 308d61f commit 9abd9ad

File tree

5 files changed

+274
-3
lines changed

5 files changed

+274
-3
lines changed

‎.changeset/sixty-socks-obey.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"pie-docs": minor
3+
---
4+
5+
[Added] - the thumbnail code section

‎apps/pie-docs/src/componentStatusData.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2017,7 +2017,8 @@ const rows = [
20172017
},
20182018
{
20192019
resource: resourceTypes.WEB_COMPONENTS,
2020-
status: statusTypes.PLANNED,
2020+
link: 'https://webc.pie.design/?path=/story/thumbnail--default',
2021+
status: webComponentStatuses['pie-thumbnail'],
20212022
},
20222023
{
20232024
resource: resourceTypes.VUE,

‎apps/pie-docs/src/components/tag/code/code.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ yarn add @justeattakeaway/pie-webc
5151
tableData: props
5252
} %}
5353

54-
You can customise the disabled appearance by setting the `--tag-opacity` css variable. The default opacity level for the disabled state is 0.5.
55-
5654
## Slots
5755

5856
{% componentDetailsTable {

‎apps/pie-docs/src/components/thumbnail/code/code.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
eleventyNavigation:
3+
key: Code
4+
parent: Thumbnail
5+
order: 3
6+
shouldShowContents: true
7+
eleventyComputed:
8+
props: "{% include './props.json' %}"
9+
---
10+
11+
## Overview
12+
13+
<p>
14+
<a href="https://www.npmjs.com/@justeattakeaway/pie-thumbnail" style="text-decoration: none">
15+
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-thumbnail.svg?label=pie-thumbnail">
16+
</a>
17+
18+
<a href="https://www.npmjs.com/package/@justeattakeaway/pie-webc">
19+
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg?label=pie-webc">
20+
</a>
21+
</p>
22+
23+
`pie-thumbnail` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible thumbnail component for web applications.
24+
25+
This component can be easily integrated into various frontend frameworks and customised through a set of properties.
26+
27+
{% notification {
28+
type: "information",
29+
iconName: "engineers",
30+
message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/thumbnail) instance!"
31+
} %}
32+
33+
## Installation
34+
35+
To install `pie-thumbnail` in your application, run the following on your command line:
36+
37+
```shell
38+
npm i @justeattakeaway/pie-webc
39+
```
40+
41+
```shell
42+
yarn add @justeattakeaway/pie-webc
43+
```
44+
45+
{% notification {
46+
type: "neutral",
47+
iconName: "link",
48+
message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)."
49+
} %}
50+
51+
## Props
52+
53+
{% componentDetailsTable {
54+
tableData: props
55+
} %}
56+
57+
## Examples
58+
59+
For HTML:
60+
61+
```js
62+
// import as module into a js file e.g. main.js
63+
import '@justeattakeaway/pie-webc/components/thumbnail.js'
64+
```
65+
66+
```html
67+
<!-- pass js file into <script> tag -->
68+
<pie-thumbnail src="" alt=""></pie-thumbnail>
69+
<script type="module" src="/main.js"></script>
70+
```
71+
72+
For Native JS Applications, Vue, Angular, Svelte etc.:
73+
74+
```js
75+
// Vue templates (using Nuxt 3)
76+
import '@justeattakeaway/pie-webc/components/thumbnail.js';
77+
78+
<pie-thumbnail src="" alt=""></pie-thumbnail>
79+
```
80+
81+
For React Applications:
82+
83+
```jsx
84+
import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js';
85+
86+
<PieThumbnail src="" alt=""></PieThumbnail>
87+
```
88+
89+
{% notification {
90+
type: "neutral",
91+
iconName: "link",
92+
message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)."
93+
} %}
94+
95+
## Changelog
96+
97+
{% notification {
98+
type: "neutral",
99+
iconName: "link",
100+
message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-thumbnail/CHANGELOG.md)."
101+
} %}

‎apps/pie-docs/src/components/thumbnail/code/props.json

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
{
2+
"headings": [
3+
"Prop",
4+
"Options",
5+
"Description",
6+
"Default"
7+
],
8+
"rows": [
9+
[
10+
"src",
11+
"",
12+
"The `src` attribute for the underlying image tag.",
13+
{
14+
"type": "code",
15+
"item": [
16+
"\"\""
17+
]
18+
}
19+
],
20+
[
21+
"alt",
22+
"",
23+
"The `alt` attribute for the underlying image tag.",
24+
{
25+
"type": "code",
26+
"item": [
27+
"\"\""
28+
]
29+
}
30+
],
31+
[
32+
"variant",
33+
{
34+
"type": "code",
35+
"item": [
36+
"\"default\"",
37+
"\"outline\""
38+
]
39+
},
40+
"Sets the variant of the thumbnail.",
41+
{
42+
"type": "code",
43+
"item": [
44+
"\"default\""
45+
]
46+
}
47+
],
48+
[
49+
"backgroundColor",
50+
{
51+
"type": "code",
52+
"item": [
53+
"\"default\"",
54+
"\"subtle\"",
55+
"\"strong\"",
56+
"\"dark\"",
57+
"\"inverse\"",
58+
"\"inverse-alternative\""
59+
]
60+
},
61+
"Sets the background color of the thumbnail container.",
62+
{
63+
"type": "code",
64+
"item": [
65+
"\"default\""
66+
]
67+
}
68+
],
69+
[
70+
"size",
71+
"A number between 24 and 128, in multiples of 8.",
72+
"Sets the size of the thumbnail.",
73+
{
74+
"type": "code",
75+
"item": [
76+
48
77+
]
78+
}
79+
],
80+
[
81+
"aspectRatio",
82+
{
83+
"type": "code",
84+
"item": [
85+
"\"1by1\"",
86+
"\"4by3\"",
87+
"\"16by9\""
88+
]
89+
},
90+
"Sets the aspect-ratio of the thumbnail image.",
91+
{
92+
"type": "code",
93+
"item": [
94+
"\"1by1\""
95+
]
96+
}
97+
],
98+
[
99+
"disabled",
100+
{
101+
"type": "code",
102+
"item": [
103+
"true",
104+
"false"
105+
]
106+
},
107+
"When true, the disabled styles are applied.",
108+
{
109+
"type": "code",
110+
"item": [
111+
"false"
112+
]
113+
}
114+
],
115+
[
116+
"hasPadding",
117+
{
118+
"type": "code",
119+
"item": [
120+
"true",
121+
"false"
122+
]
123+
},
124+
"When true, an extra spacing around the thumbnail container is applied.",
125+
{
126+
"type": "code",
127+
"item": [
128+
"false"
129+
]
130+
}
131+
],
132+
[
133+
"hideDefaultPlaceholder",
134+
{
135+
"type": "code",
136+
"item": [
137+
"true",
138+
"false"
139+
]
140+
},
141+
"When true, hides the component default placeholder on image load failure.",
142+
{
143+
"type": "code",
144+
"item": [
145+
"false"
146+
]
147+
}
148+
],
149+
[
150+
"placeholder",
151+
{
152+
"type": "code",
153+
"item": [
154+
"{ src?: string, alt?: string }"
155+
]
156+
},
157+
"Overrides the component default placeholder with a custom one on image load failure.",
158+
{
159+
"type": "code",
160+
"item": [
161+
"{}"
162+
]
163+
}
164+
]
165+
]
166+
}

0 commit comments

Comments
 (0)