Skip to content

Commit

Permalink
Merge pull request #223 from US-CBP/USA-Banner-update
Browse files Browse the repository at this point in the history 
Usa banner and structured list update
  • Loading branch information
@bagrub
bagrub authored Nov 1, 2024
2 parents 62126e3 + 472c054 commit 9017532
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 14 deletions.
6 changes: 2 additions & 4 deletions packages/web-components/src/components/cbp-structured-list/cbp-structured-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,12 @@ cbp-structured-list {
}
}

/*
*Collection
*/
/**Collection */

div[role=list]:only-child > *:first-child {
border-top: var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color);
}

/** Selectable */

&[selectable] [slot=cbp-structured-list-header] {
Expand Down
215 changes: 210 additions & 5 deletions packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,28 +363,233 @@ StructuredListMedia.args = {
showHeader: false,
listItems: [
{
content: "<cbp-grid grid-template-columns='1fr 3fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
content: "<cbp-grid grid-template-columns='100px 1fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' style='width: 100px'/></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
color: 'default',
selected: false
},
{
content: "<cbp-grid grid-template-columns='1fr 3fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
content: "<cbp-grid grid-template-columns='100px 1fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' style='width: 100px'/></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
color: 'default',
selected: false
},
{
content: "<cbp-grid grid-template-columns='1fr 3fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
content: "<cbp-grid grid-template-columns='100px 1fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
color: 'default',
selected: false
},
{
content: "<cbp-grid grid-template-columns='1fr 3fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
content: "<cbp-grid grid-template-columns='100px 1fr' gap='1rem'><div><img src='./assets/images/cbp-seal.svg' /></div><div><cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>CBP Seizes over 2 Million Pounds of Cocaine</cbp-link></cbp-typography><cbp-typography tag='p'>CBP officers out of the Port of Baltimore Narcotics task force seized more than 2 million pounds of cocaine tuesday. It is one of the largest single seizures of cocaine ever recorded</cbp-typography><cbp-typography tag='p'><cbp-icon name='globe' size='1rem'></cbp-icon> <i>https://www.cbp.dhs.gov/news/cocaine</i></cbp-typography><cbp-tag> News</cbp-tag></div><cbp-grid>",
color: 'default',
selected: false
},
]
}

/*<------------------------------------ Collection w/ Calendar ---------------------------------------->*/
const StructuredListMediaCalendarTemplate = ({ listItems, striped, selectable, context, sx }) => {
return `
<cbp-structured-list
${striped ? `striped` : ''}
${selectable ? `selectable` : ''}
header-id="list-header"
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
${generateItems(listItems)}
</cbp-structured-list>
`;
};
export const StructuredListMediaCalendar = StructuredListMediaCalendarTemplate.bind({});
StructuredListMediaCalendar.argTypes = {
listItems: {
description: 'Configure various aspects of the list items within the structured list.',
control: 'object',
},
}
StructuredListMediaCalendar.args = {
showHeader: false,
listItems: [
{
content: `<cbp-grid grid-template-columns='6.25rem 1fr' gap='1rem'>
<cbp-flex
display="flex"
direction="column"
align-items="center"
>
<cbp-flex-item
sx='{
"width":"100%",
"text-align":"center",
"border-radius":"var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0",
"padding-block":"var(--cbp-space-2x)",
"background-color":"var(--cbp-color-red-50)",
"border":"var(--cbp-border-size-sm) solid var(--cbp-color-red-50)",
"color":"var(--cbp-color-white)",
"text-transform":"uppercase",
"font-size":"var(--cbp-font-size-heading-xl)",
"font-weight":"var(--cbp-font-weight-regular)"
}'
>
apr
</cbp-flex-item>
<cbp-flex-item
sx='{
"width":"100%",
"height":"4.25rem",
"text-align":"center",
"border-radius":"0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft)",
"border-width":"var(--cbp-border-size-md)",
"border-style":"solid",
"border-color":"var(--cbp-color-gray-cool-40)",
"border-top":"none",
"color":"var(--cbp-structured-list-color)",
"font-size":"var(--cbp-font-size-masthead-1)",
"font-weight":"var(--cbp-font-weight-black)",
"line-height":"1.75"
}'
>
31
</cbp-flex-item>
</cbp-flex>
<div>
<cbp-typography tag='p'>
<cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon>
<cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Find the Hidden Beetle Training</cbp-link>
</cbp-typography>
<cbp-typography tag='p'>This training session will help you find those pesky hiding beetles. Inside boxes, on top of containers, or in someone's pocket, these bugs don't stand a chance of getting to America's sweet, delicious forests</cbp-typography>
<cbp-typography tag='p'>
<cbp-icon name='globe' size='1rem'></cbp-icon>
<i>https://www.cbp.dhs.gov/news/beetles</i>
</cbp-typography>
</div>
<cbp-grid>`,
color: 'default',
selected: false
},
{
content: `<cbp-grid grid-template-columns='6.25rem 1fr' gap='1rem'>
<cbp-flex
display="flex"
direction="column"
align-items="center"
>
<cbp-flex-item
sx='{
"width":"100%",
"text-align":"center",
"border-radius":"var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0",
"padding-block":"var(--cbp-space-2x)",
"background-color":"var(--cbp-color-red-50)",
"border":"var(--cbp-border-size-sm) solid var(--cbp-color-red-50)",
"color":"var(--cbp-color-white)",
"text-transform":"uppercase",
"font-size":"var(--cbp-font-size-heading-xl)",
"font-weight":"var(--cbp-font-weight-regular)"
}'
>
mar
</cbp-flex-item>
<cbp-flex-item
sx='{
"width":"100%",
"height":"4.25rem",
"text-align":"center",
"border-radius":"0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft)",
"border-width":"var(--cbp-border-size-md)",
"border-style":"solid",
"border-color":"var(--cbp-color-gray-cool-40)",
"border-top":"none",
"color":"var(--cbp-structured-list-color)",
"font-size":"var(--cbp-font-size-masthead-1)",
"font-weight":"var(--cbp-font-weight-black)",
"line-height":"1.75"
}'
>
15
</cbp-flex-item>
</cbp-flex>
<div>
<cbp-typography tag='p'>
<cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon>
<cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Agency Picnic</cbp-link>
</cbp-typography>
<cbp-typography tag='p'>Every year the Capital District CBP employees come together to have a nice (ant free) picnic</cbp-typography>
<cbp-typography tag='p'>
<cbp-icon name='globe' size='1rem'></cbp-icon>
<i>https://www.cbp.dhs.gov/news/capital-picnic</i>
</cbp-typography>
</div>
<cbp-grid>
`,
color: 'default',
selected: false
},
{
content: `<cbp-grid grid-template-columns='6.25rem 1fr' gap='1rem'>
<cbp-flex
display="flex"
direction="column"
align-items="center"
>
<cbp-flex-item
sx='{
"width":"100%",
"text-align":"center",
"border-radius":"var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0",
"padding-block":"var(--cbp-space-2x)",
"background-color":"var(--cbp-color-red-50)",
"border":"var(--cbp-border-size-sm) solid var(--cbp-color-red-50)",
"color":"var(--cbp-color-white)",
"text-transform":"uppercase",
"font-size":"var(--cbp-font-size-heading-xl)",
"font-weight":"var(--cbp-font-weight-regular)"
}'
>
feb
</cbp-flex-item>
<cbp-flex-item
sx='{
"width":"100%",
"height":"4.25rem",
"text-align":"center",
"border-radius":"0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft)",
"border-width":"var(--cbp-border-size-md)",
"border-style":"solid",
"border-color":"var(--cbp-color-gray-cool-40)",
"border-top":"none",
"color":"var(--cbp-structured-list-color)",
"font-size":"var(--cbp-font-size-masthead-1)",
"font-weight":"var(--cbp-font-weight-black)",
"line-height":"1.75"
}'
>
3
</cbp-flex-item>
</cbp-flex>
<div>
<cbp-typography tag='p'>
<cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon>
<cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Commissioners Awards</cbp-link>
</cbp-typography>
<cbp-typography tag='p'>Join us in person or online to celebrate this past years CBP employees excellence awards.</cbp-typography>
<cbp-typography tag='p'>
<cbp-icon name='globe' size='1rem'></cbp-icon>
<i>https://www.cbp.dhs.gov/news/awards</i>
</cbp-typography>
</div>
<cbp-grid>
`,
color: 'default',
selected: false
}
]
}

/*<------------------------------------ Select ---------------------------------------->*/

Expand Down Expand Up @@ -420,7 +625,7 @@ StructuredListSelectable.argTypes = {
},
}
StructuredListSelectable.args = {
showHeader: false,
showHeader: true,
listItems: [
{
content: "Structured List Selectable Item 1",
Expand Down
17 changes: 12 additions & 5 deletions packages/web-components/src/components/cbp-usa-banner/cbp-usa-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ cbp-usa-banner {

--cbp-usa-banner-icon-rotate: rotate(90deg);

.cbp-banner__title{
font-weight: var(--cbp-font-weight-medium);
}

.cbp-usa-banner-content {
display: none;
}
Expand All @@ -36,23 +40,26 @@ cbp-usa-banner {
margin-right: var(--cbp-space-3x);
}

.cbp-usa-banner-expand:not(#fakeId) {
cbp-button.cbp-usa-banner-expand[fill='ghost'][color='primary']:not(#fakeId) {
//addition of fill & color in the selector is to up specificity to override button's dark mode var remapping correctly

--cbp-button-height: 1rem;
--cbp-button-min-height: 1rem;

--cbp-button-padding: var(--cbp-space-2x);
--cbp-button-padding: var(--cbp-space-1x);

--cbp-button-color: var(--cbp-color-interactive-secondary-light);
--cbp-button-color: var(--cbp-color-interactive-primary-light);
--cbp-button-color-hover: var(--cbp-color-interactive-secondary-lighter);
--cbp-button-color-focus: var(--cbp-color-violet-30);
--cbp-button-color-focus: var(--cbp-color-interactive-focus-light);
--cbp-button-color-active: var(--cbp-color-interactive-focus-light);

--cbp-button-color-border-hover: transparent;
--cbp-button-color-border-focus: transparent;
--cbp-button-color-border-active: transparent;

--cbp-button-border-radius: 0;

--cbp-button-color-outline-focus: var(--cbp-color-violet-30);
--cbp-button-color-outline-focus: var(--cbp-color-interactive-focus-light);

--cbp-button-color-bg: transparent;
--cbp-button-color-bg-hover: transparent;
Expand Down

0 comments on commit 9017532

Please sign in to comment.