Breaking Changes

Please upgrade the version and mention all the Breaking Changes here

Version: 0.2.0 => 0.3.0

Navbar:

Before:

const applications = [
  { label: "Hyperdrive UI", onClick: action("Hyperdrive UI clicked") }
];

const help = [
  { label: "About", onClick: action("About clicked") },
  { label: "Documentation", onClick: action("Documentation clicked") },
  { label: "Onboarding", onClick: action("Onboarding clicked") }
];

const user = {
  name: "Carlito",
  actions: [{ label: "Log out", onClick: action("Logout clicked") }]
};

const languages = [
  {
    label: "Français",
    name: "FR",
    onClick: action("French selected"),
    selected: false
  },
  {
    label: "English",
    name: "EN",
    onClick: action("English selected"),
    selected: true
  }
];
<Navbar
  onToggleClick={action("toggle clicked")}
  toggleVisible={true}
  productName={"Hardware UI"}
  languages={languages}
  applications={applications}
  help={help}
  user={user}
  tabs={tabs}
/>

After: toggleVisible, languages, applications, help, user are removed. switching languages should be implemented on the client side now.

const rightActions = [
  {
    type: "dropdown",
    text: "FR",
    icon: <i className="fas fa-globe" />,
    items: [
      {
        label: "English",
        name: "EN",
        onClick: action("English selected")
      }
    ]
  },
  {
    type: "dropdown",
    icon: <i className="fas fa-th" />,
    items: [
      { label: "Hyperdrive UI", onClick: action("Hyperdrive UI clicked") }
    ]
  },
  {
    type: "dropdown",
    icon: <i className="fas fa-question-circle" />,
    items: [
      { label: "About", onClick: action("About clicked") },
      { label: "Documentation", onClick: action("Documentation clicked") },
      { label: "Onboarding", onClick: action("Onboarding clicked") }
    ]
  },
  {
    type: "button",
    icon: <i className="fas fa-sun" />,
    onClick: action("Theme toggle clicked")
  },
  {
    type: "dropdown",
    text: "Carlito",
    icon: <i className="fas fa-user" />,
    items: [{ label: "Log out", onClick: action("Logout clicked") }]
  }
];
 
<Navbar
  onToggleClick={action("toggle clicked")}
  productName={"Hardware UI"}
  rightActions={rightActions}
  tabs={tabs}
/>

Version: 0.3.0 => 0.4.0

Theme: Please update or customerize the color palette for the light/dark theme

const themes = [
  {
    name: "Light Theme",
    brand: {
      base: "#607080",
      primary: "#FAF9FB",
      primaryDark1: "#F7F6F9",
      primaryDark2: "#EDEAF0",
      secondary: "#037AFF",
      secondaryDark1: "#1C3D59",
      secondaryDark2: "#1C2E3F",
      success: "#006F62",
      healthy: "#25AC56",
      healthyLight: "#75FE63",
      info: "#027AFF",
      warning: "#FEFA51",
      danger: "#EF3340"
      critical: "#BE2543",
      background: "#ffffff",
      backgroundBluer: "#ECF4FF",
      textPrimary: "#313B44",
      textSecondary: "#8593A0",
      textTertiary: "#6C8398",
      borderLight: "#A5A5A5",
      border: "#A5A5A5"
    }
  },
  {
    name: "Dark Theme",
    brand: {
      base: "#6A7B92",
      primary: "#1D1D1F",
      primaryDark1: "#171718",
      primaryDark2: "#0A0A0A",
      secondary: "#037AFF",
      secondaryDark1: "#1C3D59",
      secondaryDark2: "#1C2E3F",
      success: "#006F62",
      healthy: "#25AC56",
      healthyLight: "#75FE63",
      info: "#027AFF",
      warning: "#FEFA51",
      danger: "#EF3340",
      critical: "#BE2543",
      background: "#121214",
      backgroundBluer: "#182A41",
      textPrimary: "#FFFFFF",
      textSecondary: "#A8B5C1",
      textTertiary: "#A7B6C3",
      borderLight: "#2C3137",
      border: "#A5A5A5"
    }
  }
];