STYLING.md

Styleguide link

Zuri Master Guide - For typography, color palette, iconography, imagery, buttons, forms and spacing.

FE Quality Control Docs - For guidelines on how to contributeto the frontend.

Styling in Zuri Main

To avoid style clashes use css modules when styling in Zuri Main for example

// IS NOT VALID UNLESS REFERENCING A STYLE MADE AVAILABLE IN THE GLOBAL STYLESHEET
const TestComponent = () => {
  return <div style={`testComponentDiv`}></div>
}
export default TestComponent

// IS VALID
import style from "./styles.module.css"

const TestComponent = () => {
  return <div style={`${style.testComponentDiv}`}></div>
}
export default TestComponent

Styling for plugins in Zuri Main

In the webpack.config.js modify to

const { mergeWithRules } = require("webpack-merge")
const singleSpaDefaults = require("webpack-config-single-spa-react")

const mergeRules = {
  plugins: "replace",
  devServer: {
    static: {
      directory: "replace"
    }
  },
  module: {
    rules: {
      test: "match",
      include: "replace",
      exclude: "replace",
      use: "replace"
    }
  }
}

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "zuri",
    projectName: "{REPLACE WITH APPLICATION NAME}",
    webpackConfigEnv,
    argv
  })

  return mergeWithRules(mergeRules)(defaultConfig, {
    //   OTHER WEBPACK RULES
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                modules: {
                  localIdentName: "[local]--[hash:base64:5]__[name]"
                }
              }
            }
          ]
        }
      ]
    }
  })
}