Skip to content

Commit dd36dda

Browse files
karlikpjkarlikpj
committed
(#4631) Pull Quote HTML
Closes #4631
1 parent ffd77fc commit dd36dda

File tree

6 files changed

+112
-0
lines changed

6 files changed

+112
-0
lines changed

‎packages/ncids-css/packages/nci-pull-quote/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use './internal/nci-pull-quote';

‎packages/ncids-css/packages/nci-pull-quote/internal/_nci-pull-quote.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use 'uswds-core' as *;
2+
@use "sass:meta" as meta;
3+
4+
.nci-pull-quote {
5+
@include u-display('flex');
6+
7+
flex-direction: column;
8+
flex-wrap: wrap;
9+
margin-block-end: units(3);
10+
11+
@include at-media('tablet') {
12+
flex-direction: row;
13+
}
14+
15+
&__container {
16+
flex: 1;
17+
}
18+
19+
&__with-image {
20+
& .nci-pull-quote__container {
21+
@include at-media('tablet') {
22+
margin-inline-end: units(3);
23+
}
24+
}
25+
}
26+
27+
&__body {
28+
@include u-font('body', 'xl');
29+
@include u-padding(0);
30+
margin-block-start: units(3);
31+
margin-block-end: units(2.5);
32+
}
33+
34+
&__author,
35+
&__title {
36+
@include u-font('body', 'md');
37+
@include u-text(600);
38+
margin-block-start: 0;
39+
margin-block-end: 0;
40+
}
41+
&__author {
42+
margin-block-start: units(2.5);
43+
}
44+
45+
&__image {
46+
background: #eee;
47+
border: 4px solid #aaa;
48+
border-radius: 50%;
49+
@include u-display('block');
50+
margin: 20px auto 0 auto;
51+
width: 225px;
52+
height: 225px;
53+
@include at-media('tablet') {
54+
flex: 0 1 auto;
55+
margin-block-start: 0;
56+
}
57+
}
58+
59+
background: url('data:image/png;base64,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');
60+
background-repeat: no-repeat;
61+
background-position: 0px 24px;
62+
63+
@include at-media('tablet') {
64+
background-position: 0px 12px;
65+
}
66+
67+
@include at-media('desktop') {
68+
background-position: 0px 0px;
69+
}
70+
}

‎packages/ncids-css/packages/ncids/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
@forward 'usa-list';
2828
@forward 'usa-section';
2929
@forward 'usa-skipnav';
30+
@forward 'nci-pull-quote';
3031

3132
// USWDS
3233
// -------------------------------------

‎packages/ncids-twig/components/nci-pull-quote/nci-pull-quote.twig‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="nci-pull-quote {{ modifier }}">
2+
<div class="nci-pull-quote__container">
3+
<p class="nci-pull-quote__body">{{ body }}</p>
4+
<p class="nci-pull-quote__author">{{ author }}</p>
5+
<p class="nci-pull-quote__title">{{ title }}</p>
6+
</div>
7+
{% if image %}
8+
<div class="nci-pull-quote__image">&nbsp;</div>
9+
{% endif %}
10+
</div>

‎testing/ncids-css-testing/src/stories/components/nci-pull-quote/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward "styles/ncids";
2+
@forward "nci-pull-quote";

‎testing/ncids-css-testing/src/stories/components/nci-pull-quote/nci-pull-quote.default.stories.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Component from '@nciocpl/ncids-twig/components/nci-pull-quote/nci-pull-quote.twig';
2+
import css from './index.scss?inline';
3+
4+
export default {
5+
title: 'components/Pull Quote/Default',
6+
component: Component,
7+
parameters: { css },
8+
};
9+
10+
export const NCIPullQuote = {
11+
args: {
12+
body:
13+
'Mauris vehicula erat quis facilisis laoreet. Mauris eget vestibulum diam, quis pulvinar odio. Aenean nec eros ligula. Aliquam erat divvolutpat. Quisque volutpat nisl risus',
14+
author: 'Stephen J. Chanock, M.D.',
15+
title: 'Division of Cancer Epidemiology & Genetics Director',
16+
},
17+
};
18+
19+
export const NCIPullQuoteWithImage = {
20+
args: {
21+
body:
22+
'Mauris vehicula erat quis facilisis laoreet. Mauris eget vestibulum diam, quis pulvinar odio. Aenean nec eros ligula. Aliquam erat divvolutpat. Quisque volutpat nisl risus',
23+
author: 'Stephen J. Chanock, M.D.',
24+
title: 'Division of Cancer Epidemiology & Genetics Director',
25+
image: 'path',
26+
modifier: 'nci-pull-quote__with-image',
27+
},
28+
};

0 commit comments

Comments
 (0)