docs(core): ✨ add alt text sample

add alt text sample with CoreImage Ref: #186
wrappid · Aug 16, 2024 · 7f30fdb · 7f30fdb
1 parent 5b9c36a
commit 7f30fdb
Showing 1 changed file with 27 additions and 6 deletions.
diff --git a/app/components/component-docs/dataDisplay/CoreImage.docs.js b/app/components/component-docs/dataDisplay/CoreImage.docs.js
@@ -15,17 +15,38 @@ export default function CoreImageDocs() {
       <CodeImport name="CoreImage" />
 
       <CodeSample
-        title={"Simple CoreImage "}
+        title={"Sample CoreImage "}
         description={"Below is a sample of how to use the CoreImage component."}
-        code={`<CoreImage width={200} height={200}
-src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
-</CoreImage>`}
+        code={`<CoreImage
+  width={200}
+  height={200}
+  alt="Phoenicopterus ruber"
+  src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" 
+/>`}
         renderElement={<>
           <CoreImage
             width={200}
             height={200}
-            src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
-          </CoreImage>
+            alt="Phoenicopterus ruber"
+            src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"
+          />
+        </>}
+      />
+
+      <CodeSample
+        title={"Alt text"}
+        description={"With alt text set, the image will have alternative text. For demonstration purposes, the image source(src) has been removed."}
+        code={`<CoreImage
+  width={200}
+  height={200}
+  alt="Phoenicopterus ruber"
+/>`}
+        renderElement={<>
+          <CoreImage
+            width={200}
+            height={200}
+            alt="Phoenicopterus ruber"
+          />
         </>}
       />