@skhemata/skhemata-blog/dist/stories/SkhemataBlogFeatured.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/SkhemataBlogFeatured',
    component: 'skhemata-blog',
    argTypes: {
        apiWordpress: argTypes.apiWordpress,
        navigate: argTypes.navigate,
        skhemataBlogTextColor: argTypes.skhemataBlogTextColor,
        skhemataBlogFeaturedTitleColor: {
            name: '--skhemata-blog-featured-title-color',
            description: 'Color of the featured article title',
            defaultValue: 'rgb(50, 149, 220)',
            control: 'color',
            table: {
                category: 'CSS Properties',
                type: 'color'
            },
        },
        skhemataBlogFeaturedReadMoreColor: {
            name: '--skhemata-blog-featured-read-more-color',
            description: 'Color of the read more button',
            defaultValue: 'rgb(50, 149, 220)',
            control: 'color',
            table: {
                category: 'CSS Properties',
                type: 'color'
            },
        },
        skhemataBlogFeaturedReadMoreBackgroundColor: {
            name: '--skhemata-blog-featured-read-more-background-color',
            description: 'Background color of the read more button',
            defaultValue: 'rgba(255, 255, 255, 0)',
            control: 'color',
            table: {
                category: 'CSS Properties',
                type: 'color'
            },
        },
        skhemataBlogFeaturedReadMoreColorHover: {
            name: '--skhemata-blog-featured-read-more-color-hover',
            description: 'Color of the read more button',
            defaultValue: 'rgb(255, 255, 255)',
            control: 'color',
            table: {
                category: 'CSS Properties',
                type: 'color'
            },
        },
        skhemataBlogFeaturedReadMoreBackgroundColorHover: {
            name: '--skhemata-blog-featured-read-more-background-color-hover',
            description: 'Background color of the read more button',
            defaultValue: 'rgb(50, 149, 220)',
            control: 'color',
            table: {
                category: 'CSS Properties',
                type: 'color'
            },
        }
    },
};
const Template = ({ apiWordpress = {
    url: 'https://wp.skhemata.com/wp-json/wp/v2',
}, skhemataBlogTextColor, skhemataBlogFeaturedTitleColor, skhemataBlogFeaturedReadMoreColor, skhemataBlogFeaturedReadMoreBackgroundColor, skhemataBlogFeaturedReadMoreColorHover, skhemataBlogFeaturedReadMoreBackgroundColorHover, }) => html `
  <style>
    body {
    --skhemata-blog-text-color: ${skhemataBlogTextColor};
    --skhemata-blog-featured-title-color: ${skhemataBlogFeaturedTitleColor};
    --skhemata-blog-featured-read-more-color: ${skhemataBlogFeaturedReadMoreColor};
    --skhemata-blog-featured-read-more-background-color: ${skhemataBlogFeaturedReadMoreBackgroundColor};
    --skhemata-blog-featured-read-more-color-hover: ${skhemataBlogFeaturedReadMoreColorHover};
    --skhemata-blog-featured-read-more-background-color-hover: ${skhemataBlogFeaturedReadMoreBackgroundColorHover};
    }
  </style>
  <skhemata-blog-featured
    .apiWordpress=${apiWordpress}
  >
  </skhemata-blog-featured>
`;
export const Example = Template.bind({});
Example.args = {
    apiWordpress: {
        url: 'https://wp.skhemata.com/wp-json/wp/v2'
    },
};
Example.parameters = {
    docs: {
        source: {
            code: `
<skhemata-blog-featured
  api-wordpress="${JSON.stringify(Example.args.apiWordpress, null, 2).replace(/"/g, '\\"')}"
>
</skhemata-blog-featured>
      `,
        },
    },
};
//# sourceMappingURL=SkhemataBlogFeatured.stories.js.map