Skip to content

Commit

Permalink
fix: Add another image example
Browse files Browse the repository at this point in the history
  • Loading branch information
manuel.carrera committed Dec 6, 2024
1 parent a643134 commit afe1516
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 1 deletion.
7 changes: 6 additions & 1 deletion modules/react/icon/stories/Image.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

import {SymbolDoc} from '@workday/canvas-kit-docs';
import {Basic} from './examples/Image/Basic';
import {FromFileSystem} from './examples/Image/FromFileSystem';

<Meta title="Images and Icons/Image" />

Expand All @@ -16,12 +17,16 @@ yarn add @workday/canvas-kit-react

## Usage

## Image
## Basic

The `Image` component is useful when trying to render raster files or images that need additional styling like aspect ratio or object fit. It renders an `img` element and therefore you have access to all [attributes and props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) of a native `img` tag.

<ExampleCodeBlock code={Basic} />

## From File System

<ExampleCodeBlock code={FromFileSystem} />

## Accessibility

### Alt Text (alt):
Expand Down
21 changes: 21 additions & 0 deletions modules/react/icon/stories/examples/Image/FromFileSystem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import {Flex} from '@workday/canvas-kit-react/layout';
import {Image} from '@workday/canvas-kit-react/icon';
import {createStyles} from '@workday/canvas-kit-styling';

// @ts-ignore: Cannot find module error
import catImage from '../images/cat.jpg';

const styleOverrides = {
parentContainer: createStyles({
maxHeight: 300,
}),
};

export const FromFileSystem = () => {
return (
<Flex cs={styleOverrides.parentContainer}>
<Image src={catImage} cs={{objectFit: 'cover', height: 200}} alt="Image of a cat mid yawn" />
</Flex>
);
};
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions modules/react/icon/stories/stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,5 +116,11 @@ storiesOf('Images and Icons/Icon', module)
<div style={{width: 400}}>
<Graphic src={graphicExample} grow={true} shouldMirror={true} />
</div>
<div style={{height: 200}}>
<Graphic
height={200}
src="https://wd5.myworkday.com/wday/asset/canvas-graphics-web/5.0.7/wd-graphic-learning-welcome-desktop.svg"
/>
</div>
</div>
));

0 comments on commit afe1516

Please sign in to comment.