@kickstartds/ds-agency-premium 1.0.1

package/README.md

@@ -0,0 +1,96 @@
+# kickstartDS Agency Starter
+
+kickstartDS Agency Starter is a specialized version of the kickstartDS Starter, tailored for digital agencies. It provides a set of content components that can be used to style marketing pages, while maintaining the flexibility and customizability of the original starter.
+
+## Features
+
+- **Design System:** A ready-to-use Design System, with pre-configured semantic token structure and example components.
+- **Storybook Integration:** Storybook is configured with best practices, kickstartDS integration, addons, and composition. Hot reload is enabled for all code changes.
+- **Playroom Integration:** Playroom is integrated for prototyping.
+- **Bundling:** The Design System is bundled for use with and without React.
+- **Release Handling:** Semantic release handling is configured using auto.
+- **Content:** Includes components, recipes, pages, and docs.
+
+## Installation
+
+To install the Agency Starter, you need to have Node.js installed. We recommend managing your local Node.js versions using [nvm](https://github.com/nvm-sh/nvm).
+
+## Getting Started
+
+To get started with the Agency Starter, follow these steps:
+
+1. Create a new repository based on this template.
+2. Update the `package.json` file with your project details.
+3. Add your own logo.
+4. Install the dependencies (`npm install` / `yarn install`).
+5. Start Storybook (`npm start`, `yarn start`).
+
+## Components
+
+The Agency Starter includes several components that are immediately useful for creating marketing pages. These components are built using the kickstartDS Starter and kickstartDS itself, showcasing its features and best practices:
+
+| Component       | Description                                                                                        | Main Properties                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Blog Aside**  | This component provides meta info for a singular blog entry.                                       | author, social sharing links, reading time, and published date           |
+| **Blog Head**   | This component serves as the intro portion of a singular blog entry.                               | published date, tags, headline, and cover image                          |
+| **Blog Teaser** | This component is used to display a blog teaser with date, tags, headline, teaser text and author. | date, tags, headline, teaser text, image, link, reading time, and author |
+| **Button**      | A basic button component for user interaction.                                                     | label, target, variant, icon, size, and disabled state                   |
+| **CTA**         | A Call to Action component.                                                                        | headline, subheadline, text, button, and alignment                       |
+| **FAQ**         | This component is used to display a FAQ section.                                                   | an array of questions and answers                                        |
+| **Features**    | This component is used to display a set of features.                                               | layout and features                                                      |
+| **Footer**      | A basic footer component.                                                                          | logo, navigation, and social links                                       |
+| **Gallery**     | This component is used to display a gallery of images.                                             | images and captions                                                      |
+| **Header**      | A basic header component.                                                                          | logo, navigation, and social links                                       |
+| **Logos**       | This component is used to display a set of logos.                                                  | an array of logos                                                        |
+| **Nav Main**    | This component is used for main navigation.                                                        | an array of navigation items                                             |
+| **Section**     | This component is used to layout components into pages.                                            | title, content, and layout                                               |
+| **Split**       | This component is used to create a split layout.                                                   | left and right content                                                   |
+| **Stats**       | This component is used to display a set of statistics.                                             | an array of stats                                                        |
+| **Teaser Card** | This component is used to display a teaser card.                                                   | image, headline, text, and link                                          |
+| **Testimonial** | This component is used to display a testimonial.                                                   | author, quote, and image                                                 |
+| **Text**        | A basic text component.                                                                            | content and variant                                                      |
+| **Visual**      | This component is used to display a visual element.                                                | image, alt text, and caption                                             |
+
+## Customizing
+
+### Applying your Design / Brand
+
+To apply your branding and corporate design to kickstartDS, you need to follow two main steps:
+
+1. Use a reduced set of Branding Token to generate your initial Design Token set in `src/token/branding-token.json`.
+2. Fine-tune the resulting Design Token set in `src/token/dictionary` to closely fit your corporate identity.
+
+For a more in-depth overview of those tokens, have a look at our [foundations page](https://www.kickstartds.com/docs/foundations/token/) about [Branding Token](https://www.kickstartds.com/docs/foundations/token/branding-token/), detailing all values in use.
+
+You can change some select values around to match your brand. For example, you might want to change the `primary` color to `#05566a`, the `primary-inverted` color to `#ecff00`, and the `font-family` to `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'` if you're trying to recreate the kickstartDS branding.
+
+After you've selected your Branding Tokens, you can apply them by updating the `branding-token.json` file with your chosen values, and running `npm run init-tokens` / `yarn init-tokens`.
+
+With this, you have completed your Design Token setup, and your branding should be successfully applied to kickstartDS!
+
+### Adding Your Own Component
+
+To add your own component to this project, you can follow the guide ["Create a component"](https://www.kickstartds.com/docs/guides/examples/components/teaser-card/). Alternatively you can read about the ideas behind [component creation](https://www.kickstartds.com/docs/guides/components/create/). Here is a brief overview of the steps involved:
+
+1. **Create your component file:** This should be a `.tsx` file in the `src/components` directory. The component should be a functional component and should follow the structure of existing components. For example, if you're creating a `MyComponent` component, you would create a `MyComponent.tsx` file in the `src/components/my-component` directory.
+
+2. **Create your component's JSON Schema:** This should be a `.schema.json` file in the same directory as your component file. This file should define the [component API](https://www.kickstartds.com/docs/foundations/components/component-api/) for your component. For example, if you're creating a `MyComponent` component, you would create a `my-component.schema.json` file in the `src/components/my-component` directory. The `.ts` file for props will be generated based on this JSON Schema definition.
+
+3. **Create your component's Storybook file:** This should be a `.stories.tsx` file in the same directory as your component file. This file should define the Storybook stories for your component. For example, if you're creating a `MyComponent` component, you would create a `MyComponent.stories.tsx` file in the `src/components/my-component` directory.
+
+4. **Add your component to the Playroom components:** This involves adding an export statement for your component in the `src/playroom/components.ts` file.
+
+## Contributing
+
+Contributions are welcome. Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as below, without any additional terms or conditions.
+
+## License
+
+This project is licensed under either of
+
+- [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([LICENSE-APACHE](LICENSE-APACHE))
+- [MIT license](https://opensource.org/license/mit/) ([LICENSE-MIT](LICENSE-MIT))
+
+at your option.
+
+The SPDX license identifier for this project is MIT OR Apache-2.0.

package/dist/ButtonProps-03ff6d21.d.ts

@@ -0,0 +1,41 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Text content to display inside the button
+ */
+type Label = string;
+/**
+ * Target that should be linked, makes the button behave like a link semantically
+ */
+type Target = string;
+/**
+ * Variant of button to be used
+ */
+type Variant = "primary" | "secondary" | "tertiary";
+/**
+ * Choose an icon
+ */
+type Icon = string;
+/**
+ * Size of button to use
+ */
+type Size = "small" | "medium" | "large";
+/**
+ * Whether the button should be disabled
+ */
+type Disabled = boolean;
+/**
+ * Component used for user interaction
+ */
+interface ButtonProps {
+    label: Label;
+    target?: Target;
+    variant?: Variant;
+    icon?: Icon;
+    size?: Size;
+    disabled?: Disabled;
+}
+export { Label, Target, Variant, Icon, Size, Disabled, ButtonProps };

package/dist/CtaProps-93230a76.d.ts

@@ -0,0 +1,113 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Headline for the Component element
+ */
+type ComponentHeadline = string;
+/**
+ * Subheadline below the component headline
+ */
+type ComponentSubheadline = string;
+/**
+ * Info text for the component element
+ */
+type ComponentText = string;
+/**
+ * Visually highlight the text
+ */
+type HighlightText = boolean;
+/**
+ * Make the text and buttons color neutral
+ */
+type ColorNeutral = boolean;
+/**
+ * Set the width of the content to the full width of the element
+ */
+type Width = boolean;
+/**
+ * Text content to display inside the button
+ */
+type Label = string;
+/**
+ * Choose an icon
+ */
+type Icon = string;
+/**
+ * Target that should be linked, makes the button behave like a link semantically
+ */
+type Target = string;
+/**
+ * Background color for the whole element
+ */
+type BackgroundColor = string;
+/**
+ * Background image for the whole element
+ */
+type BackgroundImage = string;
+/**
+ * Image source to use
+ */
+type ImageSource = string;
+/**
+ * Toggle padding of the image
+ */
+type Padding = boolean;
+/**
+ * Image description
+ */
+type AltText = string;
+/**
+ * Switch to displaying the image after the text on mobile
+ */
+type MobileImageAfterText = boolean;
+/**
+ * Switch to displaying the image after the text on desktop
+ */
+type DesktopImageAfterText = boolean;
+/**
+ * Choose the alginment of the text
+ */
+type TextAlignment = "left" | "center";
+/**
+ * Select a vertical alignment for the image
+ */
+type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
+interface CtaProps {
+    headline?: ComponentHeadline;
+    sub?: ComponentSubheadline;
+    text?: ComponentText;
+    highlightText?: HighlightText;
+    colorNeutral?: ColorNeutral;
+    fullWidth?: Width;
+    buttons?: Button[];
+    backgroundColor?: BackgroundColor;
+    backgroundImage?: BackgroundImage;
+    image?: Image;
+    order?: Order;
+    textAlign?: TextAlignment;
+    contentAlign?: VerticalAlignmentOfTheContent;
+}
+interface Button {
+    label?: Label;
+    icon?: Icon;
+    target?: Target;
+}
+/**
+ * Image displayed alongside the text content
+ */
+interface Image {
+    src?: ImageSource;
+    padding?: Padding;
+    alt?: AltText;
+}
+/**
+ * Choose what comes first on mobile and desktop: image or text
+ */
+interface Order {
+    mobileImageLast?: MobileImageAfterText;
+    desktopImageLast?: DesktopImageAfterText;
+}
+export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Width, Label, Icon, Target, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, CtaProps, Button, Image, Order };

package/dist/FaqProps-ad618cd5.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * The questions and answers in the Faq section
+ *
+ * @minItems 1
+ */
+type Questions = [
+    {
+        question: Question;
+        answer: Answer;
+    },
+    ...{
+        question: Question;
+        answer: Answer;
+    }[]
+];
+/**
+ * The question
+ */
+type Question = string;
+/**
+ * The answer to the question
+ */
+type Answer = string;
+/**
+ * Component used to display a Faq section
+ */
+interface FaqProps {
+    questions: Questions;
+}
+export { Questions, Question, Answer, FaqProps };

package/dist/FeaturesProps-79dea880.d.ts

@@ -0,0 +1,284 @@
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * The layout variant to use for the features
+ */
+type Layout = "largeTiles" | "smallTiles" | "list";
+/**
+ * Activate/disable the CTAs
+ */
+type CTAToggle = boolean;
+/**
+ * The features to display
+ *
+ * @minItems 1
+ * @maxItems 8
+ */
+type Features = [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+] | [
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    },
+    {
+        icon?: Icon;
+        title: Title;
+        text: Text;
+        cta?: CallToAction;
+    }
+];
+/**
+ * The icon for the feature
+ */
+type Icon = string;
+/**
+ * The title of the feature
+ */
+type Title = string;
+/**
+ * The description of the feature
+ */
+type Text = string;
+/**
+ * The CTA target
+ */
+type CallToActionTarget = string;
+/**
+ * The text label displayed on the link
+ */
+type LinkLabel = string;
+/**
+ * Component used to display a set of features
+ */
+interface FeaturesProps {
+    layout?: Layout;
+    style?: "intext" | "stack" | "centered" | "besideLarge" | "besideSmall";
+    ctas?: {
+        toggle?: CTAToggle;
+        style?: "button" | "link" | "intext";
+    };
+    features?: Features;
+}
+/**
+ * The call to action
+ */
+interface CallToAction {
+    target?: CallToActionTarget;
+    label?: LinkLabel;
+}
+export { Layout, CTAToggle, Features, Icon, Title, Text, CallToActionTarget, LinkLabel, FeaturesProps, CallToAction };