# @square360/drupal-scss-addon

> Storybook addon to show themes and use ecosystem for global theme value.

Latest version **0.1.3** (published 2022-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @square360/drupal-scss-addon
pnpm add @square360/drupal-scss-addon
yarn add @square360/drupal-scss-addon
bun add @square360/drupal-scss-addon
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-10-15 |
| First published | 2022-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rena Fletcher |
| Maintainers | renafletcher0068 |
| Keywords | style, design, storybook-addons |

## Links

- npm: https://www.npmjs.com/package/@square360/drupal-scss-addon
- Repository: https://github.com/renafletcher0068/s360-drupal-scss-addon
- Homepage: https://github.com/renafletcher0068/s360-drupal-scss-addon#readme
- Issues: https://github.com/renafletcher0068/s360-drupal-scss-addon/issues
- npm.io page: https://npm.io/package/@square360/drupal-scss-addon

## Recent versions

- 0.1.3 (latest) — 2022-10-15
- 0.1.2 — 2022-10-15
- 0.1.1 — 2022-10-15
- 0.0.7 — 2022-10-13
- 0.0.6 — 2022-10-13
- 0.0.5 — 2022-08-18
- 0.0.4 — 2022-08-18
- 0.0.3 — 2022-08-18
- 0.0.2 — 2022-08-17
- 0.0.1 — 2022-08-17

## README

# Storybook Addon Drupal SCSS Theming
Storybook addon to show themes and use cohesive ecosystem for global theme value. Addon will place other theme stylesheets on head of story book and remove on switch component or change theme.

## Installation

From the root of your repo:

```console
yarn add -D @square360/drupal-scss-addon
```

## Getting started

First enable the addon. Add it to the `addons` in the `.storybook/main.js`.

```javascript
// .storybook/main.js
module.exports = {
  // ...
  addons: [
    // ...
    '@square360/drupal-scss-addon',
  ],
  // ...
};
```

Then, configure the `supportedThemes` and `selectedTheme` parameters in `.storybook/preview.js`.

`supportedThemes` is an object where the keys are the IDs of the dropdown, and the values are the theme names that will show in the dropdown of the storybook preview toolbar.

```javascript
// .storybook/preview.js
export const parameters = {
  // ...
  selectedTheme: "primary",
  supportedThemes: {
    primary: "Primary",
    secondary: "Secondary"
  },
  // ...
};
```

## Start Storybook

```console
yarn storybook
```

# Usage in Stories

The currently selected theme is available in `selectedTheme` globally, you can access it in `MyComponent.stories.js`. eg:

```js
const Template = (args, { globals: { selectedTheme } }) => {
  console.log("Template selectedTheme:", selectedTheme);

  return <Button {...args} selectedTheme={selectedTheme} />;
};
```

# Usage with CSS

There is another way to use this addon. You just enable `../dist/` staticDir in `.storybook/main.js` globally.

```js
module.exports = {
  stories: [
    '../src/**/*.stories.@(js|ts)',
  ],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@square360/drupal-scss-addon',
  ],
  staticDirs: [
    '../dist/', // this one
    './fontawesome'
  ],
};
```

Now your directory structure should be like this:

```shell
/{component-name}
  {component-name}.stories.js
  {component-name}.js
  {component-name}.scss
  {component-name}.twig
  {component-name}.yml
  /{theme-name}
    {component-name}.{theme-name}.js
    {component-name}.{theme-name}.scss
    {component-name}.{theme-name}.yml (optional)
    {component-name}.{theme-name}.twig (optional)
```

The above should create the following files inside the `dist` folder on root:

```shell
{component-name}/{component-name}.css
{component-name}/{component-name}.js
{component-name}/{theme-name}/{component-name}.{theme-name}.css
{component-name}/{theme-name}/{component-name}.{theme-name}.js
```
By following the above instruction addon will call css files according the story component loaded and theme changes from dropdown.

<!--
npm login
npm publish --access public
-->

---
_Source: https://npm.io/package/@square360/drupal-scss-addon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._