From ac704d2eb6a2673cdea06be7c41a2c4ba88fa20d Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 6 Apr 2024 10:28:27 -0400 Subject: [PATCH 1/3] refactor: listing examples --- lib/examples/blocks/EventListing.stories.tsx | 285 ----------- lib/examples/blocks/Listing.stories.tsx | 477 ++++++++++++++++++ lib/examples/blocks/NewsListing.stories.tsx | 207 -------- lib/examples/blocks/PeopleListing.stories.tsx | 217 -------- 4 files changed, 477 insertions(+), 709 deletions(-) delete mode 100644 lib/examples/blocks/EventListing.stories.tsx create mode 100644 lib/examples/blocks/Listing.stories.tsx delete mode 100644 lib/examples/blocks/NewsListing.stories.tsx delete mode 100644 lib/examples/blocks/PeopleListing.stories.tsx diff --git a/lib/examples/blocks/EventListing.stories.tsx b/lib/examples/blocks/EventListing.stories.tsx deleted file mode 100644 index 8a86db452..000000000 --- a/lib/examples/blocks/EventListing.stories.tsx +++ /dev/null @@ -1,285 +0,0 @@ -import React from 'react' -import type { Meta, StoryObj } from '@storybook/react' -import { Section } from '../../layouts/Section/Section' -import { Container } from '../../layouts/Container/Container' -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 { PageHeaders } from '../../components/PageHeaders/PageHeaders' -import { Listing } from '../../components/Listing/Listing' -import { TextImage } from '../../components/TextImage/TextImage' -import { EventData } from '../../data/EventData' -import { NavDataSingle, NavAsideData } from '../../data/NavData' - -const meta: Meta = { - title: 'Examples/Blocks', -} - -export default meta -type Story = StoryObj - -export const EventListing: Story = { - render: () => ( - <> - - -
-
- - -

- 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. -

- - - - - - - {EventData.slice(0, 4).map( - ({ - id, - title, - link, - startDate, - endDate, - on_campus, - on_campus_building, - on_campus_room_number, - event_address, - }) => ( - - - - {title} - - - Event details - - - - ), - )} - - - - - - - {EventData.slice(0, 4).map( - ({ - id, - title, - link, - startDate, - endDate, - on_campus, - on_campus_building, - on_campus_room_number, - event_address, - }) => ( - - - - {title} - - - Event details - - - - ), - )} - - - - - - - {EventData.slice(0, 4).map( - ({ - id, - title, - link, - startDate, - endDate, - on_campus, - on_campus_building, - on_campus_room_number, - event_address, - }) => ( - - - - {title} - - - Event details - - - - ), - )} - - - - - - - {EventData.slice(0, 4).map( - ({ - id, - title, - link, - startDate, - endDate, - on_campus, - on_campus_building, - on_campus_room_number, - event_address, - }) => ( - - - - {title} - - - Event details - - - - ), - )} - - - - - -

- 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. -

- - - {EventData.slice(0, 3).map( - ({ - id, - title, - link, - startDate, - endDate, - on_campus, - on_campus_building, - on_campus_room_number, - event_address, - }) => ( - - - - {title} - - - Event details - - - - ), - )} - - -

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-
-
- - - - ), -} diff --git a/lib/examples/blocks/Listing.stories.tsx b/lib/examples/blocks/Listing.stories.tsx new file mode 100644 index 000000000..39d5ce79c --- /dev/null +++ b/lib/examples/blocks/Listing.stories.tsx @@ -0,0 +1,477 @@ +import React from 'react' +import type { Meta, StoryObj } from '@storybook/react' +import { Section } from '../../layouts/Section/Section' +import { Container } from '../../layouts/Container/Container' +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 { PageHeaders } from '../../components/PageHeaders/PageHeaders' +import { Listing } from '../../components/Listing/Listing' +import { TextImage } from '../../components/TextImage/TextImage' +import { EventData } from '../../data/EventData' +import { IconData } from '../../data/IconData' +import { NewsData } from '../../data/NewsData' +import { PeopleData } from '../../data/PeopleData' +import { NavDataSingle, NavAsideData } from '../../data/NavData' + +const meta: Meta = { + title: 'Examples/Blocks', +} + +export default meta +type Story = StoryObj + +export const Listings: Story = { + render: () => ( + <> + + +
+
+ + +

+ 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. +

+ + + + + + + {EventData.slice(0, 4).map( + ({ + id, + title, + link, + startDate, + endDate, + on_campus, + on_campus_building, + on_campus_room_number, + event_address, + }) => ( + + + + {title} + + + + Event details + + + + + ), + )} + + + + + + + {EventData.slice(0, 4).map( + ({ + id, + title, + link, + startDate, + endDate, + on_campus, + on_campus_building, + on_campus_room_number, + event_address, + }) => ( + + + + {title} + + + + Event details + + + + + ), + )} + + + + + + + {EventData.slice(0, 3).map( + ({ + id, + title, + link, + startDate, + endDate, + on_campus, + on_campus_building, + on_campus_room_number, + event_address, + }) => ( + + + + {title} + + + + Event details + + + + + ), + )} + + + + + + + {EventData.slice(0, 3).map( + ({ + id, + title, + link, + startDate, + endDate, + on_campus, + on_campus_building, + on_campus_room_number, + event_address, + }) => ( + + + + {title} + + + + Event details + + + + + ), + )} + + + + + + + {IconData.slice(0, 3).map(({ id, link, title, icon }) => ( + + + + {title} + + + + + Get Informed + + + + + ))} + + + + + + + {IconData.slice(0, 3).map(({ id, link, title, icon }) => ( + + + + {title} + + + + + Get Informed + + + + + ))} + + + + + + + {IconData.slice(0, 3).map(({ id, link, title, icon }) => ( + + + + {title} + + + + + Get Informed + + + + + ))} + + + + + + + {IconData.slice(0, 3).map(({ id, link, title, icon }) => ( + + + + {title} + + + + + Get Informed + + + + + ))} + + + + + + + {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( + + + {alt} + + + {title} + + + + Read more + + + + + ))} + + + + + + + {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( + + + {alt} + + + {title} + + + + Read more + + + + + ))} + + + + + + + {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( + + + {alt} + + + {title} + + + + Read more + + + + + ))} + + + + + + + {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( + + + {alt} + + + {title} + + + + Read more + + + + + ))} + + + + + + + {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( + + + {alt} + + + {`${firstName} ${lastName}`} + + {email} + + + + View profile + + + + + ))} + + + + + + + {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( + + + {alt} + + + {`${firstName} ${lastName}`} + + {email} + + + + View profile + + + + + ))} + + + + + + + {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( + + + {alt} + + + {`${firstName} ${lastName}`} + + {email} + + + + View profile + + + + + ))} + + + + + + + {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( + + + {alt} + + + {`${firstName} ${lastName}`} + + {email} + + + + View profile + + + + + ))} + + +
+
+ + + + ), +} diff --git a/lib/examples/blocks/NewsListing.stories.tsx b/lib/examples/blocks/NewsListing.stories.tsx deleted file mode 100644 index b9e10820f..000000000 --- a/lib/examples/blocks/NewsListing.stories.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import React from 'react' -import type { Meta, StoryObj } from '@storybook/react' -import { Section } from '../../layouts/Section/Section' -import { Container } from '../../layouts/Container/Container' -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 { PageHeaders } from '../../components/PageHeaders/PageHeaders' -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 NewsListing: Story = { - render: () => ( - <> - - -
-
- - -

- 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. -

- - - - - - - {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( - - - {alt} - - - {title} - - - Read more - - - - ))} - - - - - - - {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( - - - {alt} - - - {title} - - - Read more - - - - ))} - - - - - - - {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( - - - {alt} - - - {title} - - - Read more - - - - ))} - - - - - - - {NewsData.slice(0, 4).map(({ id, title, link, excerpt, date, image, alt }) => ( - - - {alt} - - - {title} - - - Read more - - - - ))} - - - - - -

- 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. -

- - - {NewsData.slice(0, 3).map(({ id, title, link, excerpt, date, image, alt }) => ( - - - {alt} - - - {title} - - - Read more - - - - ))} - - -

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-
-
- - - - ), -} diff --git a/lib/examples/blocks/PeopleListing.stories.tsx b/lib/examples/blocks/PeopleListing.stories.tsx deleted file mode 100644 index 67a06994a..000000000 --- a/lib/examples/blocks/PeopleListing.stories.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import React from 'react' -import type { Meta, StoryObj } from '@storybook/react' -import { Section } from '../../layouts/Section/Section' -import { Container } from '../../layouts/Container/Container' -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 { PageHeaders } from '../../components/PageHeaders/PageHeaders' -import { Listing } from '../../components/Listing/Listing' -import { TextImage } from '../../components/TextImage/TextImage' -import { PeopleData } from '../../data/PeopleData' -import { NavDataSingle, NavAsideData } from '../../data/NavData' - -const meta: Meta = { - title: 'Examples/Blocks', -} - -export default meta -type Story = StoryObj - -export const PeopleListing: Story = { - render: () => ( - <> - - -
-
- - -

- 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. -

- - - - - - - {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( - - - {alt} - - - {`${firstName} ${lastName}`} - - {email} - - - View profile - - - - ))} - - - - - - - {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( - - - {alt} - - - {`${firstName} ${lastName}`} - - {email} - - - View profile - - - - ))} - - - - - - - {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( - - - {alt} - - - {`${firstName} ${lastName}`} - - {email} - - - View profile - - - - ))} - - - - - - - {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( - - - {alt} - - - {`${firstName} ${lastName}`} - - {email} - - - View profile - - - - ))} - - - - - -

- 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. -

- - - {PeopleData.slice(0, 4).map(({ id, link, image, alt, firstName, lastName, jobTitle, email, phone }) => ( - - - {alt} - - - {`${firstName} ${lastName}`} - - {email} - - - View profile - - - - ))} - - -

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-

- 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. -

-
-
- - - - ), -} From 1618551c00562e1d400884597f81f00d934ea1bc Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 6 Apr 2024 10:53:12 -0400 Subject: [PATCH 2/3] change: listing props and styles --- CHANGELOG.mdx | 2 + lib/components/Card/CardPeopleMeta.tsx | 2 +- lib/components/Listing/Listing.tsx | 22 ++--------- lib/components/Listing/ListingEventMeta.tsx | 2 +- lib/components/Listing/ListingExcerpt.tsx | 2 +- lib/components/Listing/ListingFooter.tsx | 15 +------- lib/components/Listing/ListingIconThumb.tsx | 39 +++----------------- lib/components/Listing/ListingPeopleMeta.tsx | 2 +- 8 files changed, 16 insertions(+), 70 deletions(-) diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx index b0fe45c7e..7a2d497b5 100644 --- a/CHANGELOG.mdx +++ b/CHANGELOG.mdx @@ -41,6 +41,8 @@ Prefix the change with one of these keywords: - Icon: restricted to only black, red, white and light grey - Icon Cards: restricted to red icons, removed shadow and bg colors - 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 - Text and Image: header always has underline diff --git a/lib/components/Card/CardPeopleMeta.tsx b/lib/components/Card/CardPeopleMeta.tsx index d8ec5785f..3696cace2 100644 --- a/lib/components/Card/CardPeopleMeta.tsx +++ b/lib/components/Card/CardPeopleMeta.tsx @@ -10,7 +10,7 @@ export const CardPeopleMeta = ({ jobTitle, children, phone }: CardPeopleMetaProp {jobTitle &&
  • {jobTitle}
    • } {children && (
  • - {children} + {children}
    • )} {phone &&
  • {phone}
    • } diff --git a/lib/components/Listing/Listing.tsx b/lib/components/Listing/Listing.tsx index b5d4f1d1e..73cae37ae 100644 --- a/lib/components/Listing/Listing.tsx +++ b/lib/components/Listing/Listing.tsx @@ -1,6 +1,4 @@ import React from 'react' -import { ChevronRightIcon } from '@heroicons/react/24/outline' - import { ListingFigure } from './ListingFigure' import { ListingBody } from './ListingBody' import { ListingHeader } from './ListingHeader' @@ -14,26 +12,12 @@ import { ListingFooter } from './ListingFooter' export interface ListingProps { children: React.ReactNode - useArrow?: boolean } -export const ListingWrapper = ({ children, useArrow }: ListingProps) => { - const arrowStyles = useArrow ? 'pr-14' : '' - +export const ListingWrapper = ({ children }: ListingProps) => { return ( -
  • -
    - {children} - - {useArrow && ( -
    -
    - )} -
    +
  • +
    {children}
    • ) } diff --git a/lib/components/Listing/ListingEventMeta.tsx b/lib/components/Listing/ListingEventMeta.tsx index 76508faee..a02058ccb 100644 --- a/lib/components/Listing/ListingEventMeta.tsx +++ b/lib/components/Listing/ListingEventMeta.tsx @@ -10,7 +10,7 @@ export interface ListingEventMetaProps { eventAddress?: string } -export const styles = { +const styles = { redIcon: `mr-2 h-6 w-6 flex-shrink-0 text-cu-red-300`, } diff --git a/lib/components/Listing/ListingExcerpt.tsx b/lib/components/Listing/ListingExcerpt.tsx index f193915c8..fff55b7a6 100644 --- a/lib/components/Listing/ListingExcerpt.tsx +++ b/lib/components/Listing/ListingExcerpt.tsx @@ -6,7 +6,7 @@ export interface ListingExcerptProps { export const ListingExcerpt = ({ text, hasMore }: ListingExcerptProps) => { return (

    - {text.length > 170 ? `${text.substring(0, 170)}...` : text} + {text.length > 200 ? `${text.substring(0, 200)}...` : text} {hasMore && More}

    ) diff --git a/lib/components/Listing/ListingFooter.tsx b/lib/components/Listing/ListingFooter.tsx index d2d2d2f22..0417da39a 100644 --- a/lib/components/Listing/ListingFooter.tsx +++ b/lib/components/Listing/ListingFooter.tsx @@ -1,20 +1,9 @@ export interface ListingFooterProps { children: React.ReactNode - isType?: 'button' | 'badge' - buttonType?: 'solid' | 'outline' - buttonStyle?: 'red' | 'white' | 'dark-grey' | 'grey' } -export const ListingFooter = ({ children, isType, buttonType = 'solid', buttonStyle = 'red' }: ListingFooterProps) => { - const buttonClass = isType === 'button' ? `cu-card-button` : '' - const buttonTypeClass = isType === 'button' && buttonType ? `cu-card-button-${buttonType}` : 'cu-card-button-solid' - const buttonStyleClass = isType === 'button' && buttonStyle ? `cu-card-button-${buttonStyle}` : 'cu-card-button-red' - - return ( -
    - {children} -
    - ) +export const ListingFooter = ({ children }: ListingFooterProps) => { + return
    {children}
    } ListingFooter.displayName = 'Listing.Footer' diff --git a/lib/components/Listing/ListingIconThumb.tsx b/lib/components/Listing/ListingIconThumb.tsx index e0c2d20b0..9a3c71359 100644 --- a/lib/components/Listing/ListingIconThumb.tsx +++ b/lib/components/Listing/ListingIconThumb.tsx @@ -1,52 +1,23 @@ export interface ListingIconThumbProps { icon?: string - bgType?: 'none' | 'red' | 'white' - hasShadow?: boolean } -export const ListingIconThumb = ({ icon, bgType = 'red', hasShadow }: ListingIconThumbProps) => { +export const ListingIconThumb = ({ icon }: ListingIconThumbProps) => { const cdnPath = 'https://cdn.carleton.ca/rds/assets/font-awesome/' const iconPath = `${cdnPath}${icon}.svg` - const iconShadow = hasShadow ? 'shadow-md' : '' - - // Set classes on icon and wrapping div - let iconDiv - - switch (bgType) { - case 'none': - iconDiv = 'w-10 h-10' - break - case 'red': - iconDiv = 'w-16 h-16 bg-cu-red rounded-md' - break - case 'white': - iconDiv = 'w-16 h-16 bg-white rounded-md' - break - default: - iconDiv = '' - break - } - - // Use filter to change svg as image to white - const whiteIcon = { - filter: 'invert(100%) sepia(5%) saturate(0%) hue-rotate(29deg) brightness(106%) contrast(107%)', - } + const iconAlt = icon ? icon.replace(/-/g, ' ') : '' - // Use filter to change svg as image to red const redIcon = { filter: 'invert(20%) sepia(50%) saturate(7177%) hue-rotate(348deg) brightness(91%) contrast(100%)', } - // Remove dashes from icon name - const iconAlt = icon ? icon.replace(/-/g, ' ') : '' - return ( -
    +
    {`An
    ) diff --git a/lib/components/Listing/ListingPeopleMeta.tsx b/lib/components/Listing/ListingPeopleMeta.tsx index bb87b194e..1859af956 100644 --- a/lib/components/Listing/ListingPeopleMeta.tsx +++ b/lib/components/Listing/ListingPeopleMeta.tsx @@ -10,7 +10,7 @@ export const ListingPeopleMeta = ({ jobTitle, children, phone }: ListingPeopleMe {jobTitle &&
  • {jobTitle}
    • } {children && (
  • - + {children}
    • From 63fff945491a346a52d084d07716cafe8866d93a Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 6 Apr 2024 13:13:31 -0400 Subject: [PATCH 3/3] change: stackedlist props and styles --- CHANGELOG.mdx | 5 +- lib/components/Listing/Listing.tsx | 2 +- .../blocks/ListingSidebars.stories.tsx | 125 ++++++++++++++++++ .../StackedList/StackedList.styles.tsx | 13 -- lib/layouts/StackedList/StackedList.tsx | 34 ++--- lib/layouts/StackedList/styles.css | 38 ++++-- 6 files changed, 177 insertions(+), 40 deletions(-) create mode 100644 lib/examples/blocks/ListingSidebars.stories.tsx delete mode 100644 lib/layouts/StackedList/StackedList.styles.tsx diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx index 7a2d497b5..cbc0348b0 100644 --- 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 index 73cae37ae..5e53ebacd 100644 --- 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 ( -
  • +
  • {children}
    • ) diff --git a/lib/examples/blocks/ListingSidebars.stories.tsx b/lib/examples/blocks/ListingSidebars.stories.tsx new file mode 100644 index 000000000..4be2002d9 --- /dev/null +++ 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: () => ( + <> + + +
    +
    + + +

    + 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. +

    +     +     + +

    + 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. +

    + + + {NewsData.slice(0, 3).map(({ id, title, link, excerpt, date, image, alt }) => ( + + + {alt} + + + {title} + + + + Read more + + + + + ))} + + +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +
    +
    + + + + ), +} diff --git a/lib/layouts/StackedList/StackedList.styles.tsx b/lib/layouts/StackedList/StackedList.styles.tsx deleted file mode 100644 index 93d31546b..000000000 --- a/lib/layouts/StackedList/StackedList.styles.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export const styles = { - wrapper: `cu-stackedlist not-contained not-prose mx-auto overflow-hidden rounded-lg bg-white w-full`, - border: `border border-cu-black-100`, - shadow: `shadow-lg`, - oneCol: `grid md:grid-cols-1`, - twoCol: `grid md:grid-cols-2`, - offset: `md:mb-6 duration-300 ease-in`, - sm: `md:max-w-sm`, - lg: `md:max-w-lg`, - 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`, - title: `px-6 py-4 text-base md:text-xl font-semibold border-b rounded-t-lg bg-gray-50 text-cu-black-800`, -} diff --git a/lib/layouts/StackedList/StackedList.tsx b/lib/layouts/StackedList/StackedList.tsx index 35a3b028a..4f0ff5400 100644 --- 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 ( -
    - {header &&

    {header}

    } - {children} +
    + {header && ( +

    + {header} +

    + )} + + {children} +
    ) } diff --git a/lib/layouts/StackedList/styles.css b/lib/layouts/StackedList/styles.css index fe02d35c4..8962105aa 100644 --- 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; }