Storybook for simple ionic components

I'm keen to use storybook to test my custom building blocks in isolation. I make use of a lot of customised ionic components. From my reading of storybook, I can see how it is easy enough to create custom components and test them. However, I would like to put the bulk of my customisation logic into global css style sheets instead of creating loads of new components.

How would I test this in storybook?

If I create a super simple example to illustrate...

The following story will build fine:

import { centered, in_header } from '~/.storybook/utils';
import { componentWrapperDecorator } from '@storybook/angular';

import type { Meta, StoryObj } from '@storybook/angular';

import { IonButton } from '@ionic/angular';
type Story = StoryObj<IonButton>;
const meta: Meta<IonButton> = {
title: 'Ionic/Monkey Buttons',
component: IonButton,
tags: ['autodocs'],
decorators: [
centered({ horizontalMarginPx: 20 }),
componentWrapperDecorator(() => `
<ion-button> My Button </ion-button>
`),
]
};
export default meta;

export const PrimaryFull: Story = {

};

export const PrimarySecondary: Story = {
args: {
// label: 'My Button',
color: 'tertiary'
}
};


But it's not clear to me how I can add custom classes to the story to test my actual usage. For example in my global scss, I would put something like this:

ion-button {
// Rounded Corners
--border-radius: var(--button-radius);

// Defaults
display: inline-flex; // Make sure button doesn't take full width by default
align-items: center;
justify-content: center;
text-transform: none !important; // Disable uppercase globally for ion-buttons (need to force it!)
padding: 0; // Ionic adds 5px padding top & bottom
margin: 0; // remove outer margin (beyond the border-box)
box-sizing: border-box !important;

// Icon
&.icon-present {
.button-text {
margin-left: 8px;
text-align: left;
text-transform: none !important;
}
ion-icon {
margin-left: auto;
}
}

&.icon-absent {
.button-text {
text-align: center;
margin: 0 auto;
text-transform: none !important;
}
}
}


It's a bit of a weird example, but how would I apply the class icon-present to the ion-button element in the story?

I think what I actually want to do here is is use CSS to check if the ion-button has a nested ion-icon child element, and then apply the icon-present OR icon-absent classes conditionally to the ion-button. The challenge then is to create different componetnWrapper cases for each story. Hmmm. Maybe that would answer the class part too???

And a more obvious question, is it possible to change the button text at the story level?

Continue reading...