graphen 1.10.2 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/components/Dropdown/index.tsx

@@ -24,6 +24,7 @@ function Dropdown(props: Props) {
     },
     [setIsExpanded, setSelectedItem, items]
   );
+  const buttonClasses = `gc-dropdown__btn ${label ? 'gc-dropdown__btn--with-label' : ''}`;
 
   return (
     <div className="gc-dropdown">
@@ -33,7 +34,7 @@ function Dropdown(props: Props) {
       <div className="gc-dropdown__menu">
         <button
           type="button"
-          className="gc-dropdown__btn"
+          className={buttonClasses}
           data-cy="dropdown-button"
           onClick={expandMenu}
         >

package/src/{variables → components/Dropdown}/integration/dropdown.spec.js

@@ -2,6 +2,7 @@ describe("dropdown menu", () => {
   it("should open dropdown and pick a value", () => {
     cy.visit("localhost:3000");
     cy.get("[data-cy=dropdown-button]")
+      .first()
       .click()
       .get("[data-cy=dropdown-item]")
       .contains("Red")
@@ -10,6 +11,7 @@ describe("dropdown menu", () => {
       .should("contain", "Red");
 
     cy.get("[data-cy=dropdown-button]")
+      .first()
       .click()
       .get("[data-cy=dropdown-item]")
       .contains("Blue")

package/src/example.tsx

@@ -613,15 +613,27 @@ class ExampleApp extends React.PureComponent<Props, State> {
         <article className="gc-panel gc-panel--separator">
           <header className="gc-panel__title">Dropdown Menu</header>
           <div className="gc-panel__content">
-            <Dropdown
-              initValue={{ label: "-Select Value-", value: "selectValue" }}
-              label="Dropdown label"
-              items={[
-                { label: "Red", value: "red" },
-                { label: "Blue", value: "blue" },
-              ]}
-              onChange={_.noop}
-            />
+            <p>
+              <Dropdown
+                initValue={{ label: "-Select Value-", value: "selectValue" }}
+                label="Dropdown label"
+                items={[
+                  { label: "Red", value: "red" },
+                  { label: "Blue", value: "blue" },
+                ]}
+                onChange={_.noop}
+              />
+            </p>
+            <p>
+              <Dropdown
+                initValue={{ label: "-Select Value-", value: "selectValue" }}
+                items={[
+                  { label: "Red", value: "red" },
+                  { label: "Blue", value: "blue" },
+                ]}
+                onChange={_.noop}
+              />
+            </p>
           </div>
         </article>
       </>