graphen 1.10.1 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "1.10.1",
+  "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

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 type Props = {
   initValue: Readonly<{ value: string, label: string }>,
-  label: string,
+  label?: string,
   items: ReadonlyArray<{ value: string, label: string }>,
   onChange: (arg0: string) => void,
 };
@@ -24,16 +24,17 @@ function Dropdown(props: Props) {
     },
     [setIsExpanded, setSelectedItem, items]
   );
+  const buttonClasses = `gc-dropdown__btn ${label ? 'gc-dropdown__btn--with-label' : ''}`;
 
   return (
     <div className="gc-dropdown">
-      <label className="gc-dropdown__label" htmlFor="gc-dropdown__label">
+      {label && (<label className="gc-dropdown__label" htmlFor="gc-dropdown__label">
         {label}
-      </label>
+      </label>)}
       <div className="gc-dropdown__menu">
         <button
           type="button"
-          className="gc-dropdown__btn"
+          className={buttonClasses}
           data-cy="dropdown-button"
           onClick={expandMenu}
         >
@@ -69,4 +70,9 @@ function Dropdown(props: Props) {
   );
 }
 
+// @ts-ignore
+Dropdown.defaultProps = {
+  label: undefined,
+};
+
 export default Dropdown;

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>
       </>