feat(pie-docs): DSW-2616 add the code section of the thumbnail component

.changeset/sixty-socks-obey.md

@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Added] - the thumbnail code section

apps/pie-docs/src/componentStatusData.js

@@ -2017,7 +2017,8 @@ const rows = [
         },
         {
             resource: resourceTypes.WEB_COMPONENTS,
-            status: statusTypes.PLANNED,
+            link: 'https://webc.pie.design/?path=/story/thumbnail--default',
+            status: webComponentStatuses['pie-thumbnail'],
         },
         {
             resource: resourceTypes.VUE,

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

@@ -51,8 +51,6 @@ yarn add @justeattakeaway/pie-webc
   tableData: props
 } %}
 
-You can customise the disabled appearance by setting the `--tag-opacity` css variable. The default opacity level for the disabled state is 0.5.
-
 ## Slots
 
 {% componentDetailsTable {

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

@@ -0,0 +1,101 @@
+---
+eleventyNavigation:
+    key: Code
+    parent: Thumbnail
+    order: 3
+shouldShowContents: true
+eleventyComputed:
+    props: "{% include './props.json' %}"
+---
+
+## Overview
+
+<p>
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-thumbnail" style="text-decoration: none">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-thumbnail.svg?label=pie-thumbnail">
+  </a>
+
+  <a href="https://www.npmjs.com/package/@justeattakeaway/pie-webc">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg?label=pie-webc">
+  </a>
+</p>
+
+`pie-thumbnail` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible thumbnail component for web applications.
+
+This component can be easily integrated into various frontend frameworks and customised through a set of properties.
+
+{% notification {
+  type: "information",
+  iconName: "engineers",
+  message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/thumbnail) instance!"
+} %}
+
+## Installation
+
+To install `pie-thumbnail` in your application, run the following on your command line:
+
+```shell
+npm i @justeattakeaway/pie-webc
+```
+
+```shell
+yarn add @justeattakeaway/pie-webc
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  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)."
+} %}
+
+## Props
+
+{% componentDetailsTable {
+  tableData: props
+} %}
+
+## Examples
+
+For HTML:
+
+```js
+// import as module into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/thumbnail.js'
+```
+
+```html
+<!-- pass js file into <script> tag -->
+<pie-thumbnail src="" alt=""></pie-thumbnail>
+<script type="module" src="/main.js"></script>
+```
+
+For Native JS Applications, Vue, Angular, Svelte etc.:
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/thumbnail.js';
+
+<pie-thumbnail src="" alt=""></pie-thumbnail>
+```
+
+For React Applications:
+
+```jsx
+import { PieThumbnail } from '@justeattakeaway/pie-webc/react/thumbnail.js';
+
+<PieThumbnail src="" alt=""></PieThumbnail>
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)."
+} %}
+
+## Changelog
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-thumbnail/CHANGELOG.md)."
+} %}

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

@@ -0,0 +1,166 @@
+{
+    "headings": [
+        "Prop",
+        "Options",
+        "Description",
+        "Default"
+    ],
+    "rows": [
+        [
+            "src",
+            "",
+            "The `src` attribute for the underlying image tag.",
+            {
+                "type": "code",
+                "item": [
+                    "\"\""
+                ]
+            }
+        ],
+        [
+            "alt",
+            "",
+            "The `alt` attribute for the underlying image tag.",
+            {
+                "type": "code",
+                "item": [
+                    "\"\""
+                ]
+            }
+        ],
+        [
+            "variant",
+            {
+                "type": "code",
+                "item": [
+                    "\"default\"",
+                    "\"outline\""
+                ]
+            },
+            "Sets the variant of the thumbnail.",
+            {
+                "type": "code",
+                "item": [
+                    "\"default\""
+                ]
+            }
+        ],
+        [
+            "backgroundColor",
+            {
+                "type": "code",
+                "item": [
+                    "\"default\"",
+                    "\"subtle\"",
+                    "\"strong\"",
+                    "\"dark\"",
+                    "\"inverse\"",
+                    "\"inverse-alternative\""
+                ]
+            },
+            "Sets the background color of the thumbnail container.",
+            {
+                "type": "code",
+                "item": [
+                    "\"default\""
+                ]
+            }
+        ],
+        [
+            "size",
+            "A number between 24 and 128, in multiples of 8.",
+            "Sets the size of the thumbnail.",
+            {
+                "type": "code",
+                "item": [
+                    48
+                ]
+            }
+        ],
+        [
+            "aspectRatio",
+            {
+                "type": "code",
+                "item": [
+                    "\"1by1\"",
+                    "\"4by3\"",
+                    "\"16by9\""
+                ]
+            },
+            "Sets the aspect-ratio of the thumbnail image.",
+            {
+                "type": "code",
+                "item": [
+                    "\"1by1\""
+                ]
+            }
+        ],
+        [
+            "disabled",
+            {
+                "type": "code",
+                "item": [
+                    "true",
+                    "false"
+                ]
+            },
+            "When true, the disabled styles are applied.",
+            {
+                "type": "code",
+                "item": [
+                    "false"
+                ]
+            }
+        ],
+        [
+            "hasPadding",
+            {
+                "type": "code",
+                "item": [
+                    "true",
+                    "false"
+                ]
+            },
+            "When true, an extra spacing around the thumbnail container is applied.",
+            {
+                "type": "code",
+                "item": [
+                    "false"
+                ]
+            }
+        ],
+        [
+            "hideDefaultPlaceholder",
+            {
+                "type": "code",
+                "item": [
+                    "true",
+                    "false"
+                ]
+            },
+            "When true, hides the component default placeholder on image load failure.",
+            {
+                "type": "code",
+                "item": [
+                    "false"
+                ]
+            }
+        ],
+        [
+            "placeholder",
+            {
+                "type": "code",
+                "item": [
+                    "{ src?: string, alt?: string }"
+                ]
+            },
+            "Overrides the component default placeholder with a custom one on image load failure.",
+            {
+                "type": "code",
+                "item": [
+                    "{}"
+                ]
+            }
+        ]
+    ]
+}