@skhemata/skhemata-blog/dist/stories/SkhemataBlogPost.stories.js

Skhemata Blog Web Component. This web component provides several sub components in addition to main component, allowing featured blogs, blog listing and blog post display.

import { html } from '@skhemata/skhemata-base';
import '../skhemata-blog.js';
import { argTypes } from './argTypes.js';
export default {
    title: 'Wordpress/SkhemataBlog/SkhemataBlogPost',
    component: 'skhemata-blog',
    argTypes: {
        apiWordpress: argTypes.apiWordpress,
        blogPagePath: argTypes.blogPagePath,
        navigate: argTypes.navigate,
        slug: argTypes.slug,
        skhemataBlogTextColor: argTypes.skhemataBlogTextColor,
        skhemataBlogLinkColor: argTypes.skhemataBlogLinkColor,
        skhemataBlogPostBackButtonColor: {
            name: '--skhemata-blog-post-back-button-color',
            control: 'color',
            description: 'Text color of the back button on the blog post',
            defaultValue: 'rgb(255, 255, 255)',
            table: {
                category: 'CSS Properties',
                type: 'color'
            }
        },
        skhemataBlogPostBackButtonBackgroundColor: {
            name: '--skhemata-blog-post-back-button-background-color',
            control: 'color',
            description: 'Background color of the back button on the blog post',
            defaultValue: 'rgb(50, 115, 220)',
            table: {
                category: 'CSS Properties',
                type: 'color'
            }
        },
        skhemataBlogPostSocialIconColor: {
            name: '--skhemata-blog-post-social-icon-color',
            control: 'color',
            description: 'Color of the social media icons',
            defaultValue: 'rgb(242, 113, 28)',
            table: {
                category: 'CSS Properties',
                type: 'color'
            }
        },
        skhemataBlogPostHeadingColor: {
            name: '--skhemata-blog-post-heading-color',
            control: 'color',
            description: 'Color of the content headings',
            defaultValue: 'rgb(54, 54, 54)',
            table: {
                category: 'CSS Properties',
                type: 'color'
            }
        },
    },
};
const Template = ({ apiWordpress = {
    url: 'https://wp.skhemata.com/wp-json/wp/v2'
}, blogPagePath = '', slug = 'creating-a-crowdfunding-marketplace-for-no-code-entrepreneurs', skhemataBlogTextColor, skhemataBlogLinkColor, skhemataBlogPostHeadingColor, skhemataBlogPostSocialIconColor, skhemataBlogPostBackButtonColor, skhemataBlogPostBackButtonBackgroundColor, }) => html `
  <style>
  body {
    --skhemata-blog-link-color: ${skhemataBlogLinkColor};
    --skhemata-blog-text-color: ${skhemataBlogTextColor};
    --skhemata-blog-post-heading-color: ${skhemataBlogPostHeadingColor};
    --skhemata-blog-post-social-icon-color: ${skhemataBlogPostSocialIconColor};
    --skhemata-blog-post-back-button-color: ${skhemataBlogPostBackButtonColor};
    --skhemata-blog-post-back-button-background-color: ${skhemataBlogPostBackButtonBackgroundColor};
  }
  </style>
  <skhemata-blog-post
    .apiWordpress=${apiWordpress}
    .blogPagePath=${blogPagePath}
    .slug=${slug}
  >
  </skhemata-blog>
`;
export const Example = Template.bind({});
Example.args = {
    apiWordpress: {
        url: 'https://wp.skhemata.com/wp-json/wp/v2'
    },
    slug: 'creating-a-crowdfunding-marketplace-for-no-code-entrepreneurs',
};
Example.parameters = {
    docs: {
        source: {
            code: `
<skhemata-blog-post
  api-wordpress="${JSON.stringify(Example.args.apiWordpress, null, 2).replace(/"/g, '\\"')}"
  slug="${Example.args.slug}"
>
</skhemata-blog-post>
      `,
        },
    },
};
//# sourceMappingURL=SkhemataBlogPost.stories.js.map