diff --git a/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte new file mode 100644 index 0000000..fc888e5 --- /dev/null +++ b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte @@ -0,0 +1,17 @@ + + + + diff --git a/packages/gui/src/components/News/News.svelte b/packages/gui/src/components/News/News.svelte new file mode 100644 index 0000000..064026a --- /dev/null +++ b/packages/gui/src/components/News/News.svelte @@ -0,0 +1,17 @@ + + + + diff --git a/packages/gui/src/components/PostThumbs/PostThumbs.svelte b/packages/gui/src/components/PostThumbs/PostThumbs.svelte deleted file mode 100644 index 428e2b0..0000000 --- a/packages/gui/src/components/PostThumbs/PostThumbs.svelte +++ /dev/null @@ -1,40 +0,0 @@ - - -
- {title} - {readMoreCta} -
- -
    - {#each posts as article} -
  • -
    -
    - {article.title} -
    -
    -

    {article.title}

    -

    {article.short_description}

    - Read more ... -
    -
    -
    • - {/each} -
diff --git a/packages/gui/src/routes/+page.svelte b/packages/gui/src/routes/+page.svelte index 3dd2d45..b7b8a6d 100644 --- a/packages/gui/src/routes/+page.svelte +++ b/packages/gui/src/routes/+page.svelte @@ -6,7 +6,7 @@ import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte'; import GettingStarted from '$components/GettingStarted/GettingStarted.svelte'; import TopPackages from '$components/TopPackages/TopPackages.svelte'; - import PostThumbs from '$components/PostThumbs/PostThumbs.svelte'; + import News from '$components/News/News.svelte'; backLink.set(''); @@ -22,12 +22,7 @@
- +
diff --git a/packages/gui/src/routes/documentation/+page.svelte b/packages/gui/src/routes/documentation/+page.svelte index 35aae75..300ac20 100644 --- a/packages/gui/src/routes/documentation/+page.svelte +++ b/packages/gui/src/routes/documentation/+page.svelte @@ -2,7 +2,7 @@ import '$appcss'; import PageHeader from '$components/PageHeader/PageHeader.svelte'; import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte'; - import PostThumbs from '$components/PostThumbs/PostThumbs.svelte'; + import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte'; import { backLink } from '$libs/stores'; backLink.set('/'); @@ -15,11 +15,6 @@
- +
diff --git a/packages/ui/src/Page/Page.stories.ts b/packages/ui/src/Page/Page.stories.ts deleted file mode 100644 index b787f45..0000000 --- a/packages/ui/src/Page/Page.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { within, userEvent } from '@storybook/testing-library'; -import Page from './Page.svelte'; - -export default { - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout - layout: 'fullscreen' - } -}; -export const LoggedOut = {}; - -// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing -export const LoggedIn = { - render: (args) => ({ - Component: Page, - props: args - }), - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { - name: /Log in/i - }); - await userEvent.click(loginButton); - } -}; diff --git a/packages/ui/src/Page/Page.svelte b/packages/ui/src/Page/Page.svelte deleted file mode 100644 index 49f1496..0000000 --- a/packages/ui/src/Page/Page.svelte +++ /dev/null @@ -1,70 +0,0 @@ - - -
-
(user = { name: 'Jane Doe' })} - on:logout={() => (user = null)} - on:createAccount={() => (user = { name: 'Jane Doe' })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven - - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip - Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
diff --git a/packages/ui/src/Page/page.css b/packages/ui/src/Page/page.css deleted file mode 100644 index c1da404..0000000 --- a/packages/ui/src/Page/page.css +++ /dev/null @@ -1,71 +0,0 @@ -@import '../app.css'; - -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/packages/ui/src/PanelHeader/PanelHeader.stories.ts b/packages/ui/src/PanelHeader/PanelHeader.stories.ts new file mode 100644 index 0000000..a67b34e --- /dev/null +++ b/packages/ui/src/PanelHeader/PanelHeader.stories.ts @@ -0,0 +1,19 @@ +import PanelHeader from './PanelHeader.svelte'; + +export default { + title: 'Example/PanelHeader', + component: PanelHeader, + render: (props) => ({ + Component: PanelHeader, + props + }) +}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing +export const Example = { + args: { + title: 'Open-Source News', + ctaLabel: 'Read More News >', + ctaLink: '/' + } +}; diff --git a/packages/ui/src/PanelHeader/PanelHeader.svelte b/packages/ui/src/PanelHeader/PanelHeader.svelte new file mode 100644 index 0000000..ae188c5 --- /dev/null +++ b/packages/ui/src/PanelHeader/PanelHeader.svelte @@ -0,0 +1,10 @@ + + +
+ {title} + {ctaLabel} +
diff --git a/packages/ui/src/Posts/Posts.stories.ts b/packages/ui/src/Posts/Posts.stories.ts new file mode 100644 index 0000000..355edee --- /dev/null +++ b/packages/ui/src/Posts/Posts.stories.ts @@ -0,0 +1,33 @@ +import Posts from './Posts.svelte'; + +export default { + title: 'Example/Posts', + component: Posts, + render: ({ posts }) => ({ + Component: Posts, + props: { + posts + } + }) +}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing +export const Example = { + args: { + posts: [ + { + airtable_record_id: 'a', + link: 'https://google.com', + title: 'Tea Inc releases game changing api!', + sub_title: 'lorem ipsum dolor sit amet', + short_description: 'lorem ipsum dolor sit amet', + thumb_image_url: '/images/bored-ape.png', + thumb_image_name: 'borred-api.png', + created_at: new Date(), + updated_at: new Date(), + published_at: new Date(), + tags: ['news'] + } + ] + } +}; diff --git a/packages/ui/src/Posts/Posts.svelte b/packages/ui/src/Posts/Posts.svelte new file mode 100644 index 0000000..cd1e7f0 --- /dev/null +++ b/packages/ui/src/Posts/Posts.svelte @@ -0,0 +1,23 @@ + + +
    + {#each posts as article} +
  • +
    +
    + {article.title} +
    +
    +

    {article.title}

    +

    {article.short_description}

    + Read more ... +
    +
    +
    • + {/each} +