Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(fuselage): Modal Hero Image #860

Merged
merged 3 commits into from
Oct 4, 2022
Merged

feat(fuselage): Modal Hero Image #860

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0f2968
feat: Modal Hero Image
dougfabris Sep 30, 2022
9dc5465
fix: review
dougfabris Oct 4, 2022
22e5aca
Merge branch 'develop' into feat/modal-hero-image
kodiakhq[bot] Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/fuselage/src/components/Modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,3 +136,35 @@ export const _WithAnnotation = () => (
</Modal.Footer>
</Modal>
);

export const _WithHeroImage = () => (
<Modal>
<Modal.Header>
<Modal.HeaderText>
<Modal.Title>Modal Header</Modal.Title>
</Modal.HeaderText>
<Modal.Close />
</Modal.Header>
<Modal.HeroImage src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z' />
<Modal.Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
urna posuere, tempor urna nec, lacinia lacus. Vivamus ac lobortis arcu.
Morbi malesuada, diam sed congue aliquet, dui elit tincidunt leo, a
fermentum ante augue nec ex. Vestibulum feugiat aliquam sem vel porta.
Praesent varius aliquet consequat. Mauris id nisl egestas, egestas ipsum
sit amet, vestibulum elit. Cras vel dapibus lacus. Sed congue interdum
lobortis. In vitae consectetur enim, eu varius leo. Quisque rhoncus nulla
a rhoncus lobortis. Sed eu nulla libero. Donec lacus ante, vehicula eget
eros molestie, ullamcorper tincidunt arcu. Suspendisse eget pulvinar
lacus.
</Modal.Content>
<Modal.Footer>
<Modal.FooterControllers>
<Button>Cancel</Button>
<Button primary onClick={action('click')}>
Submit
</Button>
</Modal.FooterControllers>
</Modal.Footer>
</Modal>
);
8 changes: 8 additions & 0 deletions packages/fuselage/src/components/Modal/Modal.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ $modal-margin: theme('modal-margin', auto);
@include typography.use-font-scale(c2);
}

&__hero-image {
width: 100%;
height: auto;
max-height: lengths.size(256);
margin-bottom: lengths.size(24);
object-fit: contain;
}

&__backdrop {
position: fixed;

Expand Down
10 changes: 10 additions & 0 deletions packages/fuselage/src/components/Modal/ModalHeroImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import type { ComponentProps } from 'react';
import React from 'react';

import Box from '../Box';

export type ModalHeroImageProps = ComponentProps<typeof Box>;

export const ModalHeroImage = ({ ...props }: ModalHeroImageProps) => (
<Box rcx-modal__hero-image is='img' {...props} />
);
3 changes: 3 additions & 0 deletions packages/fuselage/src/components/Modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { ModalFooterAnnotation } from './ModalFooterAnnotation';
import { ModalFooterControllers } from './ModalFooterControllers';
import { ModalHeader } from './ModalHeader';
import { ModalHeaderText } from './ModalHeaderText';
import { ModalHeroImage } from './ModalHeroImage';
import { ModalIcon } from './ModalIcon';
import { ModalTagline } from './ModalTagline';
import { ModalThumb } from './ModalThumb';
Expand All @@ -24,6 +25,7 @@ export default Object.assign(Modal, {
Title: ModalTitle,
Tagline: ModalTagline,
HeaderText: ModalHeaderText,
HeroImage: ModalHeroImage,
FooterControllers: ModalFooterControllers,
FooterAnnotation: ModalFooterAnnotation,
});
Expand All @@ -39,6 +41,7 @@ export {
ModalIcon,
ModalTagline,
ModalHeaderText,
ModalHeroImage,
ModalFooterControllers,
ModalFooterAnnotation,
};