generated from wrappid/wrappid-module
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): 🎨 update CoreImage docs structure
update CoreImage docs structure as per new requirement mentioned in referenced issue comment ref: #186
- Loading branch information
1 parent
7d55fa2
commit cca75e4
Showing
1 changed file
with
62 additions
and
36 deletions.
There are no files selected for viewing
98 changes: 62 additions & 36 deletions
98
app/components/component-docs/dataDisplay/CoreImage.docs.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,83 @@ | ||
| import { CoreClasses, CoreH4, CoreImage } from "@wrappid/core"; | ||
| import { CoreImage } from "@wrappid/core"; | ||
|
|
||
| import CodeImport from "../../CodeImport"; | ||
| import CodeSample from "../../CodeSample"; | ||
| import ComponentProps from "../../ComponentProps"; | ||
| import ComponentDocs from "../ComponentDocs"; | ||
|
|
||
| const CORE_COMPONENT = CoreImage; | ||
| const CORE_COMPONENT_NAME = (CORE_COMPONENT?.displayName || CORE_COMPONENT?.name); | ||
|
|
||
| export default function CoreImageDocs() { | ||
|
|
||
| return ( | ||
| <> | ||
| <CoreH4 styleClasses={[CoreClasses.MARGIN.MY2, CoreClasses.COLOR.TEXT_PRIMARY]}> | ||
| CoreImage | ||
| </CoreH4> | ||
|
|
||
| <CodeImport name="CoreImage" /> | ||
|
|
||
| <CodeSample | ||
| title={"Sample CoreImage "} | ||
| description={"Below is a sample of how to use the CoreImage component."} | ||
| code={`<CoreImage | ||
| <ComponentDocs | ||
| component={CORE_COMPONENT} | ||
| description={`${CORE_COMPONENT_NAME} is a component that displays an image.`} | ||
| samples={ | ||
| <> | ||
| <CodeSample | ||
| title={`Sample ${CORE_COMPONENT_NAME}`} | ||
| description={`Below is a sample of how to use the ${CORE_COMPONENT_NAME} component.`} | ||
| 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} | ||
| alt="Phoenicopterus ruber" | ||
| src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" | ||
| /> | ||
| </>} | ||
| expandedCode={`import { ${CORE_COMPONENT_NAME} } from "@wrappid/core"; | ||
| export default function Sample${CORE_COMPONENT_NAME}() { | ||
| return ( | ||
| <> | ||
| <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} | ||
| 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 | ||
| <CodeSample | ||
| title={`Alt Text ${CORE_COMPONENT_NAME}`} | ||
| 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" | ||
| /> | ||
| </>} | ||
| /> | ||
|
|
||
| <ComponentProps component={CoreImage} /> | ||
| expandedCode={`import { ${CORE_COMPONENT_NAME} } from "@wrappid/core"; | ||
| export default function AltText${CORE_COMPONENT_NAME}() { | ||
| return ( | ||
| <> | ||
| <CoreImage | ||
| width={200} | ||
| height={200} | ||
| alt="Phoenicopterus ruber" | ||
| /> | ||
| </> | ||
| ); | ||
| }`} | ||
| renderElement={<> | ||
| <CoreImage | ||
| width={200} | ||
| height={200} | ||
| alt="Phoenicopterus ruber" | ||
| /> | ||
| </>} | ||
| /> | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| } |