- 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
-
-
-`;
-
- article.insertAdjacentHTML('beforeend', section);
-
- return article;
-};
diff --git a/packages/web-components/src/stories/Page.stories.js b/packages/web-components/src/stories/Page.stories.js
deleted file mode 100644
index a80a4c4a..00000000
--- a/packages/web-components/src/stories/Page.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { within, userEvent } from '@storybook/testing-library';
-import { createPage } from './Page';
-
-export default {
- title: 'Example/Page',
- render: () => createPage(),
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/html/configure/story-layout
- layout: 'fullscreen',
- },
-};
-
-export const LoggedOut = {};
-
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
-export const LoggedIn = {
- 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/web-components/src/stories/button.css b/packages/web-components/src/stories/button.css
deleted file mode 100644
index dc91dc76..00000000
--- a/packages/web-components/src/stories/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-weight: 700;
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- line-height: 1;
-}
-.storybook-button--primary {
- color: white;
- background-color: #1ea7fd;
-}
-.storybook-button--secondary {
- color: #333;
- background-color: transparent;
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
- font-size: 12px;
- padding: 10px 16px;
-}
-.storybook-button--medium {
- font-size: 14px;
- padding: 11px 20px;
-}
-.storybook-button--large {
- font-size: 16px;
- padding: 12px 24px;
-}
diff --git a/packages/web-components/src/stories/header.css b/packages/web-components/src/stories/header.css
deleted file mode 100644
index d9a70528..00000000
--- a/packages/web-components/src/stories/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.storybook-header svg {
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header h1 {
- font-weight: 700;
- font-size: 20px;
- line-height: 1;
- margin: 6px 0 6px 10px;
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header button + button {
- margin-left: 10px;
-}
-
-.storybook-header .welcome {
- color: #333;
- font-size: 14px;
- margin-right: 10px;
-}
diff --git a/packages/web-components/src/stories/page.css b/packages/web-components/src/stories/page.css
deleted file mode 100644
index 098dad11..00000000
--- a/packages/web-components/src/stories/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.storybook-page {
- 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;
-}
-
-.storybook-page h2 {
- font-weight: 700;
- font-size: 32px;
- line-height: 1;
- margin: 0 0 4px;
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-page p {
- margin: 1em 0;
-}
-
-.storybook-page a {
- text-decoration: none;
- color: #1ea7fd;
-}
-
-.storybook-page ul {
- padding-left: 30px;
- margin: 1em 0;
-}
-
-.storybook-page li {
- margin-bottom: 8px;
-}
-
-.storybook-page .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;
-}
-
-.storybook-page .tip-wrapper {
- font-size: 13px;
- line-height: 20px;
- margin-top: 40px;
- margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
- display: inline-block;
- height: 12px;
- width: 12px;
- margin-right: 4px;
- vertical-align: top;
- margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
- fill: #1ea7fd;
-}
diff --git a/packages/web-components/src/utils/utils.spec.ts b/packages/web-components/src/utils/utils.spec.ts
deleted file mode 100644
index 81ff970a..00000000
--- a/packages/web-components/src/utils/utils.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { format } from './utils';
-
-describe('format', () => {
- it('returns empty string for no names defined', () => {
- expect(format(undefined, undefined, undefined)).toEqual('');
- });
-
- it('formats just first names', () => {
- expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
- });
-
- it('formats first and last names', () => {
- expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
- });
-
- it('formats first, middle and last names', () => {
- expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
- });
-});
diff --git a/packages/web-components/src/utils/utils.ts b/packages/web-components/src/utils/utils.ts
deleted file mode 100644
index 4fb9a8b2..00000000
--- a/packages/web-components/src/utils/utils.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function format(first: string, middle: string, last: string): string {
- return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
diff --git a/packages/web-components/src/utils/utils.tsx b/packages/web-components/src/utils/utils.tsx
new file mode 100644
index 00000000..8943c849
--- /dev/null
+++ b/packages/web-components/src/utils/utils.tsx
@@ -0,0 +1,8 @@
+export const createNamespaceKey = (prefix?: string): string => (prefix ? prefix + '-' : '') + (Math.random() + 1).toString(26).slice(2, 7);
+
+export const setCSSProps =