change: stackedlist props and styles

cuweb · Apr 6, 2024 · 63fff94 · 63fff94
1 parent 1618551
commit 63fff94
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 40 deletions.
diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
@@ -43,8 +43,10 @@ Prefix the change with one of these keywords:
 - Icon Cards: fixed width and height for icons inside container
 - Listings: removed button color options in footer subcomponent, restricted to red
 - Listings: updated card styles
-- Pagination: active text changed to red
 - Nav: space between logo and site title
+- Pagination: active text changed to red
+- Stacked List: removed border option
+- Stacked List: updated max width query sizes when offset used
 - Text and Image: header always has underline
 - Wide Image: opacity range set at 60-80
 
@@ -55,6 +57,7 @@ Prefix the change with one of these keywords:
 
 ### Fixed
 
+- Stacked List: bottom border on odd / even items
 - Pagination: accessibility error relating to role="presentation"
 
 ## [0.9.6]

diff --git a/lib/components/Listing/Listing.tsx b/lib/components/Listing/Listing.tsx
@@ -16,7 +16,7 @@ export interface ListingProps {
 
 export const ListingWrapper = ({ children }: ListingProps) => {
   return (
-    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6`}>
+    <li className={`cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8`}>
       <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">{children}</div>
     </li>
   )

diff --git a/lib/examples/blocks/ListingSidebars.stories.tsx b/lib/examples/blocks/ListingSidebars.stories.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Section } from '../../layouts/Section/Section'
+import { Main } from '../../layouts/Main/Main'
+import { FooterStandard } from '../../components/Footer/FooterStandard/FooterStandard'
+import { StackedList } from '../../layouts/StackedList/StackedList'
+import { Nav } from '../../components/Nav/Nav'
+import { Listing } from '../../components/Listing/Listing'
+import { NewsData } from '../../data/NewsData'
+import { TextImage } from '../../components/TextImage/TextImage'
+import { NavDataSingle, NavAsideData } from '../../data/NavData'
+
+const meta: Meta = {
+  title: 'Examples/Blocks',
+}
+
+export default meta
+type Story = StoryObj
+
+export const ListingSidebars: Story = {
+  render: () => (
+    <>
+      <Nav>
+        <Nav.Primary>
+          <Nav.Logo title="Web Services" link="https://carleton.ca/webservices" />
+          <Nav.Menu menu={NavDataSingle} />
+          <Nav.Aside menu={NavAsideData} />
+        </Nav.Primary>
+      </Nav>
+
+      <Main>
+        <Section hasProse>
+          <TextImage hasBorder>
+            <TextImage.Content headerType="h1" title="News Listing">
+              <p>
+                Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+                reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores
+                accusamus in. Praesent quis ligula quis nulla malesuada tempor.
+              </p>
+            </TextImage.Content>
+          </TextImage>
+
+          <p>
+            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
+            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+          </p>
+
+          <StackedList header="Recent News" as="ul" cols="1" offset="right">
+            {NewsData.slice(0, 3).map(({ id, title, link, excerpt, date, image, alt }) => (
+              <Listing key={id}>
+                <Listing.Figure>
+                  <img src={image} alt={alt} width="400" height="266" />
+                </Listing.Figure>
+                <Listing.Body>
+                  <Listing.Header date={date}>{title}</Listing.Header>
+                  <Listing.Excerpt text={excerpt} />
+                  <Listing.Footer>
+                    <a href={link} className="cu-button cu-button--red">
+                      Read more
+                    </a>
+                  </Listing.Footer>
+                </Listing.Body>
+              </Listing>
+            ))}
+          </StackedList>
+
+          <p>
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor.
+          </p>
+          <p>
+            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
+            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+          </p>
+          <p>
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor.
+          </p>
+          <p>
+            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
+            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+          </p>
+          <p>
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor.
+          </p>
+          <p>
+            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
+            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+          </p>
+          <p>
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Nobis voluptatem dolorum et eum doloremque cupiditate
+            velit. Praesentium architecto a distinctio aut reprehenderit ducimus.
+          </p>
+          <p>
+            Aliquam luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+            Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+            reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
+            in. Praesent quis ligula quis nulla malesuada tempor. Etiam quis interdum nisi, et malesuada lectus. Aliquam
+            luctus, velit eget suscipit tincidunt, sem ex tempus turpis, quis pulvinar metus sapien in urna.
+          </p>
+        </Section>
+      </Main>
+
+      <FooterStandard />
+    </>
+  ),
+}
diff --git a/lib/layouts/StackedList/StackedList.styles.tsx b/lib/layouts/StackedList/StackedList.styles.tsx
diff --git a/lib/layouts/StackedList/StackedList.tsx b/lib/layouts/StackedList/StackedList.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { styles } from './StackedList.styles'
 import { rdsMaxWidth } from '../../utils/optionClasses'
 
 export interface StackedListProps {
@@ -9,10 +8,13 @@ export interface StackedListProps {
   listType?: 'posts' | 'toc'
   maxWidth?: '5xl' | '7xl'
   offset?: 'left' | 'right'
-  size?: 'sm' | 'lg'
   header?: string
-  hasBorder?: boolean
-  hasShadow?: boolean
+}
+
+const styles = {
+  offset: `md:mb-6 duration-300 ease-in`,
+  left: `md:float-left lg:ml-2 xl:ml-24 2xl:ml-[12%] md:mr-10`,
+  right: `md:float-right md:mr-0 xl:mr-24 2xl:mr-[12%] md:ml-10`,
 }
 
 export const StackedList = ({
@@ -22,22 +24,24 @@ export const StackedList = ({
   listType = 'posts',
   maxWidth = '5xl',
   offset,
-  size,
-  hasBorder,
-  hasShadow,
   header,
 }: StackedListProps) => {
   const ListComponent = as
-  const gridColumns = cols === '1' ? styles.oneCol : styles.twoCol
-  const borderStyle = hasBorder ? styles.border : ''
-  const shadowStyle = hasShadow ? styles.shadow : ''
-  const sizeStyles = size ? styles[size] : styles.sm
-  const offsetStyle = offset ? `${styles[offset]} ${styles.offset} ${sizeStyles}` : rdsMaxWidth[maxWidth]
+  const gridColumns = cols === '1' ? 'grid md:grid-cols-1' : 'grid md:grid-cols-2'
+  const offsetStyle = offset ? `${styles[offset]} ${styles.offset} md:max-w-sm lg:max-w-md` : rdsMaxWidth[maxWidth]
 
   return (
-    <div className={`${styles.wrapper} ${borderStyle} ${shadowStyle} ${offsetStyle}`}>
-      {header && <h2 className={`${styles.title}`}>{header}</h2>}
-      <ListComponent className={`cu-stackedlist-${listType} ${gridColumns}`}>{children}</ListComponent>
+    <div
+      className={`cu-stackedlist not-contained not-prose mx-auto overflow-hidden rounded-lg bg-white w-full shadow-lg ${offsetStyle}`}
+    >
+      {header && (
+        <h2 className="px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800">
+          {header}
+        </h2>
+      )}
+      <ListComponent className={`cu-stackedlist--${listType} cu-stackedlist--${cols} ${gridColumns}`}>
+        {children}
+      </ListComponent>
     </div>
   )
 }
diff --git a/lib/layouts/StackedList/styles.css b/lib/layouts/StackedList/styles.css
@@ -2,41 +2,59 @@
 StackedList for posts
 */
 
-.cu-stackedlist-posts > li {
-  @apply border-b border-cu-black-100 last:-mb-px;
+/* Add bottom border for single column list */
+.cu-stackedlist--posts.cu-stackedlist--1 > li {
+  @apply border-b last:border-b-0;
 }
 
-.cu-stackedlist-posts.md\:grid-cols-2 > li {
-  @apply last:mb-0 odd:border-r;
+/* Add botom border to all items */
+.cu-stackedlist--posts.cu-stackedlist--2 > li {
+  @apply border-b last:border-b-0 md:last:border-b border-cu-black-100;
+}
+
+/* Add border right on all odd items */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd) {
+  @apply md:border-r;
+}
+
+/* If odd li is last child in stacked list and remove bottom border */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd):last-child {
+  @apply md:border-b-0;
+}
+
+/* If even li is last child in stacked list and remove full bottom border */
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(even):last-child,
+.cu-stackedlist--posts.cu-stackedlist--2 > li:nth-child(odd):nth-last-child(2) {
+  @apply md:border-b-0;
 }
 
 /*
 StackedList for ToC
 */
 
-.cu-stackedlist-toc {
+.cu-stackedlist--toc {
   @apply px-5 py-6 text-cu-black-900;
 }
 
-.cu-stackedlist-toc a {
+.cu-stackedlist--toc a {
   @apply text-cyan-700 hover:text-cu-red-700;
 }
 
-.cu-stackedlist-toc ul:not(:first-child) {
+.cu-stackedlist--toc ul:not(:first-child) {
   @apply pt-3;
 }
 
-.cu-stackedlist-toc li {
+.cu-stackedlist--toc li {
   @apply py-1.5 ml-8 text-lg first:pt-0 last:pb-0;
   list-style-type: decimal;
 }
 
-.cu-stackedlist-toc li li {
+.cu-stackedlist--toc li li {
   @apply ml-6;
   list-style-type: lower-alpha;
 }
 
-.cu-stackedlist-toc li li li {
+.cu-stackedlist--toc li li li {
   @apply ml-4;
   list-style-type: lower-roman;
 }