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

Jump to bottom

Elsie base design #13

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Elsie base design #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
862a029
new plp features
kathleentynan Feb 8, 2024
930fad2
new features plp
kathleentynan Feb 8, 2024
2420917
elsie base design
kathleentynan Feb 8, 2024
c5c227d
add elsie base design
kathleentynan Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,8 +187,8 @@ Let's say as if I want to style an element with the theme's primary color. Norma
Using Tailwind the following produces the exact same result:

```
<div class="text-primary">
Yippee I am a primary color!
<div class="text-brand-700">
Yippee I am a brand color!
</div>

```
Expand Down Expand Up @@ -266,7 +266,7 @@ export const ProductItem: FunctionComponent<ProductProps> = ({
<div className="ds-sdk-product-item group relative flex flex-col max-w-sm justify-between h-full">
...
<div className="flex flex-col">
<div className="ds-sdk-product-item__product-name mt-md text-sm text-primary">
<div className="ds-sdk-product-item__product-name mt-md text-sm text-brand-700">
{htmlStringDecode(productView.name)}
</div>
<ProductPrice
Expand Down
7 changes: 2 additions & 5 deletions src/components/AddToCartButton/AddToCartButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,10 @@ export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
return (
<div className="ds-sdk-add-to-cart-button">
<button
className="flex items-center justify-center text-white text-sm rounded-full h-[32px] w-full p-sm"
style={{
'background-color': `#464646`,
}}
className="flex items-center justify-center text-white font-button-2 bg-brand-500 rounded-full h-[32px] w-full p-sm"
onClick={onClick}
>
<CartIcon className="w-[24px] pr-4" />
<CartIcon className="w-[24px] pr-4 stroke-2" />
Add To Cart
</button>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
switch (type) {
case 'error':
return (
<div className="rounded-md bg-red-50 p-4">
<div className="rounded-2 bg-red-50 p-4">
<div className="flex items-center">
<div className="flex-shrink-0 p-1">
<Error
Expand All @@ -60,7 +60,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
);
case 'warning':
return (
<div className="rounded-md bg-yellow-50 p-4">
<div className="rounded-2 bg-yellow-50 p-4">
<div className="flex items-center">
<div className="flex-shrink-0 p-1">
<Warning
Expand All @@ -83,7 +83,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
);
case 'info':
return (
<div className="rounded-md bg-blue-50 p-4">
<div className="rounded-2 bg-blue-50 p-4">
<div className="flex items-center">
<div className="flex-shrink-0 p-1">
<Info
Expand Down Expand Up @@ -117,7 +117,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
);
case 'success':
return (
<div className="rounded-md bg-green-50 p-4">
<div className="rounded-2 bg-green-50 p-4">
<div className="flex items-center">
<div className="flex-shrink-0 p-1">
<Checkmark
Expand All @@ -139,7 +139,7 @@ export const Alert: FunctionComponent<AlertProps> = ({
<div className="md:ml-6">
<button
type="button"
className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
className="inline-flex rounded-2 bg-green-50 p-1.5 text-green-500 ring-off hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
>
<span className="sr-only">Dismiss</span>
<X
Expand Down
6 changes: 3 additions & 3 deletions src/components/Breadcrumbs/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ export const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({
<li key={page.name} className="ds-sdk-breadcrumbs__item">
<div className="flex items-center">
{index > 0 && (
<Chevron className="h-sm w-sm transform -rotate-90 stroke-gray-400" />
<Chevron className="h-sm w-sm transform -rotate-90 stroke-neutral-600" />
)}

<a
href={page.href}
className={`ml-2 text-sm font-normal hover:text-gray-900 first:ml-0 ${
className={`ml-2 text-sm font-normal hover:text-neutral-900 first:ml-0 ${
page.current
? 'ds-sdk-breadcrumbs__item--current text-gray-500 font-light'
? 'ds-sdk-breadcrumbs__item--current text-brand-300 font-light'
: 'text-black'
}`}
aria-current={page.current ? 'page' : undefined}
Expand Down
10 changes: 6 additions & 4 deletions src/components/CategoryFilters/CategoryFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,17 @@ export const CategoryFilters: FunctionComponent<CategoryFiltersProps> = ({
const results = resultsTranslation.replace('{totalCount}', `${totalCount}`);

return (
<div class="sm:flex ds-widgets-_actions relative max-w-[21rem] w-full h-full px-2 flex-col overflow-y-auto">
<div class="sm:flex ds-widgets-_actions relative max-width-[480px] flex-[25] px-2 flex-col overflow-y-auto top-[6.4rem] right-0 bottom-[48px] left-0 box-content">
<div className="ds-widgets_actions_header flex justify-between items-center mb-md">
{title && <span> {title}</span>}
{!loading && <span className="text-primary text-sm">{results}</span>}
{title && <span className="font-display-3"> {title}</span>}
{!loading && (
<span className="text-brand-700 font-button-2">{results}</span>
)}
</div>

{!pageLoading && facets.length > 0 && (
<>
<div className="flex pb-4 w-full h-full">
<div className="flex pb-4">
<FilterButton
displayFilter={() => setShowFilters(false)}
type="desktop"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Facets/Facets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Facets: FunctionComponent<FacetsProps> = ({
} = useStore();
return (
<div className="ds-plp-facets flex flex-col">
<form className="ds-plp-facets__list border-t border-gray-200">
<form className="ds-plp-facets__list border-t border-neutral-500">
{searchFacets?.map((facet) => {
const bucketType = facet?.buckets[0]?.__typename;
switch (bucketType) {
Expand Down
4 changes: 3 additions & 1 deletion src/components/Facets/SelectedFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@ export const SelectedFilters: FunctionComponent = ({}) => {
focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm px-4"
onClick={() => searchCtx.clearFilters()}
>
{translation.Filter.clearAll}
<span className="font-button-2">
{translation.Filter.clearAll}
</span>
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/FacetsShimmer/FacetsShimmer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const FacetsShimmer: FunctionComponent = () => {
</div>
</div>
</div>
<div className="ds-sdk-input__border border-t mt-md border-gray-200" />
<div className="ds-sdk-input__border border-t mt-md border-neutral-200" />
</>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/components/FilterButton/FilterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,20 @@ export const FilterButton: FunctionComponent<FilterButtonProps> = ({
return type == 'mobile' ? (
<div className="ds-sdk-filter-button">
<button
className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm outline outline-gray-200 hover:outline-gray-800 h-[32px]"
className="flex items-center bg-background ring-black ring-opacity-5 rounded-2 p-sm font-button-2 outline outline-brand-700 h-[32px]"
onClick={displayFilter}
>
<AdjustmentsIcon className="w-md" />
{translation.Filter.title}
<span className="font-button-2">{translation.Filter.title}</span>
</button>
</div>
) : (
<div className="ds-sdk-filter-button-desktop">
<button
className="flex items-center bg-gray-100 ring-black ring-opacity-5 rounded-md p-sm text-sm h-[32px]"
className="flex items-center bg-background ring-black ring-opacity-5 rounded-3 p-sm outline outline-brand-700 h-[32px]"
onClick={displayFilter}
>
{title}
<span className="font-button-2">{title}</span>
</button>
</div>
);
Expand Down
14 changes: 8 additions & 6 deletions src/components/InputButtonGroup/InputButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
{inputGroupTitleSlot ? (
inputGroupTitleSlot(title)
) : (
<label className="ds-sdk-input__label text-base font-normal text-gray-900">
<label className="ds-sdk-input__label text-neutral-900 font-headline-1">
{title}
</label>
)}
Expand All @@ -143,21 +143,23 @@ export const InputButtonGroup: FunctionComponent<InputButtonGroupProps> = ({
})}
{!showMore && buckets.length > numberOfOptionsShown && (
<div
className="ds-sdk-input__fieldset__show-more flex items-center text-gray-700 cursor-pointer"
className="ds-sdk-input__fieldset__show-more flex items-center text-neutral-800 cursor-pointer"
onClick={() => setShowMore(true)}
>
<PlusIcon className="h-md w-md fill-gray-500" />
<PlusIcon className="h-md w-md fill-neutral-800" />
<button
type="button"
className="ml-sm font-light cursor-pointer border-none bg-transparent hover:border-none hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none text-sm"
className="ml-sm cursor-pointer border-none bg-transparent hover:border-none hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none"
>
{translation.InputButtonGroup.showmore}
<span className="font-button-2">
{translation.InputButtonGroup.showmore}
</span>
</button>
</div>
)}
</div>
</fieldset>
<div className="ds-sdk-input__border border-t mt-md border-gray-200" />
<div className="ds-sdk-input__border border-t mt-md border-neutral-500" />
</div>
);
};
6 changes: 3 additions & 3 deletions src/components/LabelledInput/LabelledInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,19 @@ export const LabelledInput: FunctionComponent<LabelledInputProps> = ({
: `radio-group-${attribute}`
}
type={type}
className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-gray-600 min-w-[16px]"
className="ds-sdk-labelled-input__input focus:ring-0 h-md w-md border-0 cursor-pointer accent-neutral-800 min-w-[16px]"
checked={checked}
aria-checked={checked}
onInput={onChange}
value={value}
/>
<label
htmlFor={name}
className="ds-sdk-labelled-input__label ml-sm block-display text-sm font-light text-gray-700 cursor-pointer"
className="ds-sdk-labelled-input__label ml-sm block-display text-neutral-800 font-body-1-default cursor-pointer"
>
{label}
{count && (
<span className="text-[12px] font-light text-gray-700 ml-1">
<span className="text-[12px] text-neutral-800 ml-1 font-details-overline">
{`(${count})`}
</span>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Loading/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const Loading: FunctionComponent<LoadingProps> = ({ label }) => {
isMobile ? 'loading-spinner-on-mobile' : ''
}`}
>
<div className="ds-sdk-loading__spinner bg-gray-100 rounded-full p-xs flex w-fit my-lg outline-gray-200">
<div className="ds-sdk-loading__spinner bg-neutral-200 rounded-full p-xs flex w-fit my-lg outline-neutral-300">
<LoadingIcon className="inline-block mr-xs ml-xs w-md animate-spin fill-primary" />
<span className="ds-sdk-loading__spinner-label p-xs">{label}</span>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/NoResults/NoResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
{isError ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-28 w-28 my-0 mx-auto stroke-gray-400"
className="h-28 w-28 my-0 mx-auto stroke-neutral-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -40,7 +40,7 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-28 w-28 my-0 mx-auto stroke-gray-400"
className="h-28 w-28 my-0 mx-auto stroke-neutral-600"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
Expand All @@ -53,10 +53,10 @@ export const NoResults: FunctionComponent<NoResultsProps> = ({
</svg>
)}

<h1 className="ds-sdk-no-results__page__heading text-2xl text-center text-gray-600">
<h1 className="ds-sdk-no-results__page__heading text-2xl text-center text-neutral-700">
{heading}
</h1>
<h3 className="ds-sdk-no-results__page__subheading text-lg text-center text-gray-500">
<h3 className="ds-sdk-no-results__page__subheading text-lg text-center text-brand-300">
{subheading}
</h3>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
<Chevron
className={`h-sm w-sm transform rotate-90 ${
currentPage === 1
? 'stroke-gray-400 cursor-not-allowed'
: 'stroke-gray-600 cursor-pointer'
? 'stroke-neutral-600 cursor-not-allowed'
: 'stroke-brand-700 cursor-pointer'
}`}
onClick={onPrevious}
/>
Expand All @@ -67,7 +67,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
return (
<li
key={page}
className="ds-plp-pagination__dots text-gray-500 mx-sm my-auto"
className="ds-plp-pagination__dots text-brand-300 mx-sm my-auto"
>
...
</li>
Expand All @@ -77,9 +77,9 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
return (
<li
key={page}
className={`ds-plp-pagination__item flex items-center cursor-pointer text-center text-gray-500 my-auto mx-sm ${
className={`ds-plp-pagination__item flex items-center cursor-pointer text-center font-body-2-default text-brand-700 my-auto mx-sm ${
currentPage === page
? 'ds-plp-pagination__item--current text-black font-medium underline underline-offset-4 decoration-black'
? 'ds-plp-pagination__item--current text-brand-700 font-body-1-strong underline underline-offset-4 decoration-brand-700'
: ''
}`}
onClick={() => onPageChange(page)}
Expand All @@ -92,8 +92,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
<Chevron
className={`h-sm w-sm transform -rotate-90 ${
currentPage === totalPages
? 'stroke-gray-400 cursor-not-allowed'
: 'stroke-gray-600 cursor-pointer'
? 'stroke-neutral-600 cursor-not-allowed'
: 'stroke-brand-700 cursor-pointer'
}`}
onClick={onNext}
/>
Expand Down
22 changes: 12 additions & 10 deletions src/components/PerPagePicker/PerPagePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,43 +73,45 @@ export const PerPagePicker: FunctionalComponent<PerPagePickerProps> = ({
<>
<div
ref={pageSizeMenu}
className="ds-sdk-per-page-picker ml-2 mr-2 relative inline-block text-left bg-gray-100 rounded-md outline outline-1 outline-gray-200 hover:outline-gray-600 h-[32px]"
className="ds-sdk-per-page-picker ml-2 mr-2 relative inline-block text-left h-[32px] bg-neutral-50 border-brand-700 outline-brand-700 rounded-3 border-3"
>
<button
className="group flex justify-center items-center font-normal text-sm text-gray-700 rounded-md hover:cursor-pointer border-none bg-transparent hover:border-none hover:bg-transparent focus:border-none focus:bg-transparent active:border-none active:bg-transparent active:shadow-none h-full w-full px-sm"
className="group flex justify-center items-center text-brand-700 hover:cursor-pointer border-none bg-background h-full w-full px-sm"
ref={pageSizeButton}
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
onFocus={() => setIsFocus(false)}
onBlur={() => setIsFocus(false)}
>
{selectedOption ? `${selectedOption.label}` : '24'}
<span className="font-button-2">
{selectedOption ? `${selectedOption.label}` : '24'}
</span>
<Chevron
className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-gray-600 ${
className={`flex-shrink-0 m-auto ml-sm h-md w-md stroke-1 stroke-brand-700 ${
isDropdownOpen ? '' : 'rotate-180'
}`}
/>
</button>
{isDropdownOpen && (
<ul
ref={listRef}
className="ds-sdk-per-page-picker__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
className="ds-sdk-per-page-picker__items origin-top-right absolute hover:cursor-pointer right-0 w-full rounded-2 shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none mt-2 z-20"
>
{pageSizeOptions.map((option, i) => (
<li
key={i}
aria-selected={option.value === selectedOption?.value}
onMouseOver={() => setActiveIndex(i)}
className={`py-xs hover:bg-gray-100 hover:text-gray-900 ${
i === activeIndex ? 'bg-gray-100 text-gray-900' : ''
className={`py-xs hover:bg-neutral-200 hover:text-neutral-900 ${
i === activeIndex ? 'bg-neutral-200 text-neutral-900' : ''
}}`}
>
<a
className={`ds-sdk-per-page-picker__items--item block-display px-md py-sm text-sm mb-0
no-underline active:no-underline focus:no-underline hover:no-underline
hover:text-gray-900 ${
hover:text-neutral-900 ${
option.value === selectedOption?.value
? 'ds-sdk-per-page-picker__items--item-selected font-semibold text-gray-900'
: 'font-normal text-gray-800'
? 'ds-sdk-per-page-picker__items--item-selected font-semibold text-neutral-900'
: 'font-normal text-neutral-800'
}`}
onClick={() => select(option.value)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Pill/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface PillProps {
}

const defaultIcon = (
<CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer fill-gray-700" />
<CloseIcon className="h-[12px] w-[12px] rotate-45 inline-block ml-sm cursor-pointer fill-neutral-800" />
);

// TODO: add support later to pass classes to the container div
Expand All @@ -43,7 +43,7 @@ export const Pill: FunctionComponent<PillProps> = ({
) : (
<div
key={label}
className="ds-sdk-pill inline-flex justify-content items-center bg-gray-100 rounded-full w-fit outline outline-gray-200 min-h-[32px] px-4 py-1"
className="ds-sdk-pill inline-flex justify-content items-center bg-neutral-200 rounded-full w-fit outline outline-neutral-300 min-h-[32px] px-4 py-1"
>
<span className="ds-sdk-pill__label font-normal text-sm">{label}</span>
<span className="ds-sdk-pill__cta" onClick={onClick}>
Expand Down