Add a story to base component in pxweb2-ui

Adds a basic story to the current base component in pxweb2-ui. Per Inge Vaaje <[email protected]> Mikael Nordberg
PxTools · Jan 17, 2024 · e6a897d · e6a897d
1 parent 28a1c29
commit e6a897d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx
@@ -9,7 +9,10 @@ export function App() {
   return (
     <div>
       <NxWelcome title="pxweb2" />
-      <Pxweb2Ui />
+      <Pxweb2Ui 
+        title="Welcome to pxweb2-ui!"
+        variant="primary"
+      />
     </div>
   );
 }

diff --git a/libs/pxweb2-ui/src/lib/pxweb2-ui.stories.tsx b/libs/pxweb2-ui/src/lib/pxweb2-ui.stories.tsx
@@ -12,7 +12,21 @@ export default meta;
 type Story = StoryObj<typeof Pxweb2Ui>;
 
 export const Primary = {
-  args: {},
+  args: {
+    title: 'pxweb2-ui primary!',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    title: 'pxweb2-ui secondary!',
+    variant: 'secondary',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/pxweb2-ui secondary!/gi)).toBeTruthy();
+  },
 };
 
 export const Heading: Story = {

diff --git a/libs/pxweb2-ui/src/lib/pxweb2-ui.tsx b/libs/pxweb2-ui/src/lib/pxweb2-ui.tsx
@@ -1,12 +1,20 @@
 import styles from './pxweb2-ui.module.scss';
 
 /* eslint-disable-next-line */
-export interface Pxweb2UiProps {}
+export interface Pxweb2UiProps {
+  title: string;
+  variant: 'primary' | 'secondary';
+}
 
 export function Pxweb2Ui(props: Pxweb2UiProps) {
+  const title = props.title || 'Welcome to pxweb2-ui!';
+
   return (
     <div className={styles['container']}>
-      <h1>Welcome to Pxweb2Ui! Hei alle sammen</h1>
+      <h1>{title}</h1>
+      {props.variant === 'primary' && (
+        <button className={styles['button']}>Primary</button>
+      )}
     </div>
   );
 }