graphen 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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/CoverEmpty/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import classNames from "classnames";
+import { IconImg } from "../Icons";
+
+type Props = {
+  className?: string;
+};
+
+function CoverEmpty({ className = "" }: Props) {
+  const classes = classNames("gc-cover-empty", className);
+
+  return (
+    <span className={classes}>
+      <IconImg className="gc-cover-empty__icon" />
+    </span>
+  );
+}
+
+export default CoverEmpty;

package/src/components/CoverEmpty/styles/_styles.scss

@@ -0,0 +1,17 @@
+.gc-cover-empty {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: $color-silver;
+
+  &__icon {
+    width: 38px;
+    height: 38px;
+    stroke: currentcolor;
+    fill: none;
+    stroke-width: 1.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

package/src/components/Icons/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+type IconProps = {
+  className?: string;
+};
+
+export const IconSearch = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M21 21l-4.3-4.3" />
+  </svg>
+);
+
+export const IconEdit = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+  </svg>
+);
+
+export const IconTrash = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M3 6h18" />
+    <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
+    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+  </svg>
+);
+
+export const IconPlus = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+export const IconRefresh = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+    <path d="M21 3v6h-6" />
+  </svg>
+);
+
+export const IconClock = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7v5l3 2" />
+  </svg>
+);
+
+export const IconImg = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <path d="M21 15l-5-5L5 21" />
+  </svg>
+);
+
+export const IconMail = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="M3 7l9 6 9-6" />
+  </svg>
+);
+
+export const IconCheck = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+);
+
+export const IconChevron = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames";
+
+export type SegmentedControlOption<TValue extends string = string> = {
+  value: TValue;
+  label: React.ReactNode;
+};
+
+type Props<TValue extends string = string> = {
+  options: ReadonlyArray<SegmentedControlOption<TValue>>;
+  value: TValue;
+  onChange: (value: TValue) => void;
+  className?: string;
+};
+
+function SegmentedControl<TValue extends string = string>({
+  options,
+  value,
+  onChange,
+  className = "",
+}: Props<TValue>) {
+  return (
+    <div
+      className={classNames("gc-segmented-control", className)}
+      role="tablist"
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="tab"
+          aria-selected={value === option.value}
+          className={classNames("gc-segmented-control__option", {
+            "gc-segmented-control__option--on": value === option.value,
+          })}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default SegmentedControl;

package/src/components/SegmentedControl/styles/_styles.scss

@@ -0,0 +1,26 @@
+.gc-segmented-control {
+  display: inline-flex;
+  background: $gb-color-component;
+  border: 1px solid $gb-color-component-dark;
+  border-radius: 999px;
+  padding: 3px;
+
+  &__option {
+    border: 0;
+    background: none;
+    padding: 7px 16px;
+    border-radius: 999px;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: $color-boulder;
+    cursor: pointer;
+
+    &--on {
+      background: $color-white;
+      color: $gb-color-primary;
+      box-shadow:
+        0 1px 2px rgb(33 43 54 / 5%),
+        0 1px 1px rgb(33 43 54 / 3%);
+    }
+  }
+}

package/src/components/Stat/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import classNames from "classnames";
+
+export type StatModifier = "gray" | "blue" | "green" | "amber" | "red";
+
+type Props = {
+  modifier?: StatModifier;
+  label: React.ReactNode;
+  value: React.ReactNode;
+  className?: string;
+};
+
+function Stat({ modifier = "gray", label, value, className = "" }: Props) {
+  return (
+    <div className={classNames("gc-stat", `gc-stat--${modifier}`, className)}>
+      <div className="gc-stat__key">
+        <span className="gc-stat__dot" />
+        {label}
+      </div>
+      <div className="gc-stat__value">{value}</div>
+    </div>
+  );
+}
+
+export default Stat;

package/src/components/Stat/styles/_styles.scss

@@ -0,0 +1,51 @@
+.gc-stat {
+  background: $color-white;
+  border: 1px solid $gb-color-component-dark;
+  border-radius: $radius-large;
+  padding: 16px 18px;
+  box-shadow:
+    0 1px 2px rgb(33 43 54 / 5%),
+    0 1px 1px rgb(33 43 54 / 3%);
+
+  &__key {
+    font-family: $gb-font-mono;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: $color-boulder;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+
+  &__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: $color-silver;
+  }
+
+  &__value {
+    font-size: 27px;
+    font-weight: 600;
+    color: $color-mine-shaft;
+    margin-top: 8px;
+    letter-spacing: -0.02em;
+  }
+
+  &--blue &__dot {
+    background: $gb-color-primary;
+  }
+
+  &--green &__dot {
+    background: $gb-color-success;
+  }
+
+  &--amber &__dot {
+    background: #c77b12;
+  }
+
+  &--red &__dot {
+    background: $gb-color-danger;
+  }
+}

package/src/example/styles/_docs.scss

@@ -573,6 +573,38 @@ body.docs-body {
   svg { width: 18px; height: 18px; color: var(--text); }
 }
 
+.docs-iconset-cell__svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.docs-subsection-title {
+  margin: 28px 0 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.docs-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  width: 100%;
+}
+
+.docs-cover-empty-stage {
+  width: 160px;
+  height: 120px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
 .docs-type-row {
   display: grid;
   grid-template-columns: 80px 80px 1fr;

package/src/example.scss

@@ -20,7 +20,6 @@
 @import "components/Flex/styles/styles";
 @import "components/FlexItem/styles/styles";
 @import "components/Input/styles/styles";
-@import "components/Image/styles/styles";
 @import "components/Joystick/styles/styles";
 @import "components/Led/styles/mixins";
 @import "components/Led/styles/styles";
@@ -47,6 +46,9 @@
 @import "components/Badge/styles/styles";
 @import "components/Dropdown/styles/styles";
 @import "components/Skeleton/styles/styles";
+@import "components/CoverEmpty/styles/styles";
+@import "components/SegmentedControl/styles/styles";
+@import "components/Stat/styles/styles";
 @import "example/styles/splash";
 @import "example/styles/styles";
 @import "example/styles/docs";

package/src/example.tsx

@@ -5,12 +5,16 @@ import {
   Badge,
   Button,
   Card,
+  CoverEmpty,
   Dialog,
   Dropdown,
+  Icons,
   Input,
   Link,
   Logo,
+  SegmentedControl,
   Separator,
+  Stat,
   constants,
 } from "./index";
 
@@ -124,6 +128,29 @@ const ICONS: ReadonlyArray<readonly [string, string]> = [
   ["plus", "M12 5v14M5 12h14"],
 ];
 
+const ICON_SET: ReadonlyArray<
+  readonly [string, (props: { className?: string }) => React.ReactElement]
+> = [
+  ["IconSearch", Icons.IconSearch],
+  ["IconEdit", Icons.IconEdit],
+  ["IconTrash", Icons.IconTrash],
+  ["IconPlus", Icons.IconPlus],
+  ["IconRefresh", Icons.IconRefresh],
+  ["IconClock", Icons.IconClock],
+  ["IconImg", Icons.IconImg],
+  ["IconMail", Icons.IconMail],
+  ["IconCheck", Icons.IconCheck],
+  ["IconChevron", Icons.IconChevron],
+];
+
+const SEGMENTED_OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active" },
+  { value: "archived", label: "Archived" },
+] as const;
+
+type SegmentedValue = (typeof SEGMENTED_OPTIONS)[number]["value"];
+
 const NAV = [
   {
     title: "Getting started",
@@ -155,6 +182,9 @@ const NAV = [
       { id: "card", label: "Card" },
       { id: "badge", label: "Badge" },
       { id: "navigation", label: "Navigation" },
+      { id: "segmented-control", label: "Segmented control" },
+      { id: "stat", label: "Stat" },
+      { id: "cover-empty", label: "Cover empty" },
     ],
   },
 ];
@@ -176,6 +206,9 @@ const TOC = [
   ["card", "Card"],
   ["badge", "Badge"],
   ["navigation", "Navigation"],
+  ["segmented-control", "Segmented control"],
+  ["stat", "Stat"],
+  ["cover-empty", "Cover empty"],
 ] as const;
 
 type IconProps = {
@@ -368,6 +401,7 @@ function App() {
   const [installCopied, setInstallCopied] = useState(false);
   const [dropdownValue, setDropdownValue] = useState("red");
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [segmentedValue, setSegmentedValue] = useState<SegmentedValue>("all");
 
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
@@ -663,6 +697,20 @@ function App() {
                 <IconCell key={name} name={name} d={d} />
               ))}
             </div>
+            <h3 className="docs-subsection-title">Icon set</h3>
+            <p className="docs-section-desc">
+              Ready-to-use React icon components exported from{" "}
+              <code>Icons</code>. They inherit <code>currentColor</code>; size
+              and stroke are set by the consumer via a class name.
+            </p>
+            <div className="docs-icon-grid">
+              {ICON_SET.map(([name, IconComponent]) => (
+                <div className="docs-icon-cell docs-iconset-cell" key={name}>
+                  <IconComponent className="docs-iconset-cell__svg" />
+                  <span>{name}</span>
+                </div>
+              ))}
+            </div>
           </section>
 
           <section className="docs-section" id="logo">
@@ -1025,6 +1073,77 @@ function App() {
             </Demo>
           </section>
 
+          <section className="docs-section" id="segmented-control">
+            <div className="docs-section-eyebrow">Components / 12</div>
+            <h2 className="docs-section-title">Segmented control</h2>
+            <p className="docs-section-desc">
+              A pill-shaped toggle for switching between a few mutually
+              exclusive views. Prefer it over a dropdown when there are two to
+              four options that benefit from being visible at once.
+            </p>
+            <Demo
+              stageClass="center"
+              code={`<SegmentedControl
+  options={[
+    { value: "all", label: "All" },
+    { value: "active", label: "Active" },
+    { value: "archived", label: "Archived" },
+  ]}
+  value="${segmentedValue}"
+  onChange={setSegmentedValue}
+/>`}
+            >
+              <SegmentedControl<SegmentedValue>
+                options={SEGMENTED_OPTIONS}
+                value={segmentedValue}
+                onChange={setSegmentedValue}
+              />
+            </Demo>
+          </section>
+
+          <section className="docs-section" id="stat">
+            <div className="docs-section-eyebrow">Components / 13</div>
+            <h2 className="docs-section-title">Stat</h2>
+            <p className="docs-section-desc">
+              A single key figure with a labelled, color-coded dot. Group a few
+              of them to summarise the state of a page. The dot color is set via
+              the <code>modifier</code> prop.
+            </p>
+            <Demo
+              stageClass="column"
+              code={`<Stat modifier="blue" label="Posts" value="128" />
+<Stat modifier="green" label="Published" value="94" />
+<Stat modifier="amber" label="Drafts" value="26" />
+<Stat modifier="red" label="Flagged" value="8" />`}
+            >
+              <div className="docs-stat-grid">
+                <Stat modifier="blue" label="Posts" value="128" />
+                <Stat modifier="green" label="Published" value="94" />
+                <Stat modifier="amber" label="Drafts" value="26" />
+                <Stat modifier="red" label="Flagged" value="8" />
+              </div>
+            </Demo>
+          </section>
+
+          <section className="docs-section" id="cover-empty">
+            <div className="docs-section-eyebrow">Components / 14</div>
+            <h2 className="docs-section-title">Cover empty</h2>
+            <p className="docs-section-desc">
+              A neutral placeholder for a missing image or empty media slot. It
+              fills its container, so give the parent a fixed size.
+            </p>
+            <Demo
+              stageClass="center"
+              code={`<div style={{ width: 160, height: 120 }}>
+  <CoverEmpty />
+</div>`}
+            >
+              <div className="docs-cover-empty-stage">
+                <CoverEmpty />
+              </div>
+            </Demo>
+          </section>
+
           <footer className="docs-footer">
             <div>graphen · {VERSION} · MIT</div>
             <div>Built by the CODA_ team</div>

package/src/index.ts

@@ -4,8 +4,8 @@ import Button from "src/components/Button";
 import Card from "src/components/Card";
 import Dialog from "src/components/Dialog";
 import Icon from "src/components/Icon";
+import * as Icons from "src/components/Icons";
 import Input from "src/components/Input";
-import Image from "src/components/Image";
 import Joystick from "src/components/Joystick";
 import Link from "src/components/Link";
 import Loader from "src/components/Loader";
@@ -23,6 +23,9 @@ import PanelFooter from "src/components/PanelFooter";
 import PanelTitle from "src/components/PanelTitle";
 import Switch from "src/components/Switch";
 import Skeleton from "src/components/Skeleton";
+import CoverEmpty from "src/components/CoverEmpty";
+import SegmentedControl from "src/components/SegmentedControl";
+import Stat from "src/components/Stat";
 import * as constants from "src/variables/constants";
 
 export {
@@ -32,6 +35,7 @@ export {
   Card,
   Dialog,
   Icon,
+  Icons,
   Input,
   Joystick,
   Link,
@@ -41,7 +45,6 @@ export {
   Tooltip,
   Validation,
   Logo,
-  Image,
   Dropdown,
   Flex,
   FlexItem,
@@ -51,5 +54,11 @@ export {
   PanelTitle,
   Switch,
   Skeleton,
+  CoverEmpty,
+  SegmentedControl,
+  Stat,
   constants,
 };
+
+export type { SegmentedControlOption } from "src/components/SegmentedControl";
+export type { StatModifier } from "src/components/Stat";

package/src/style.scss

@@ -20,7 +20,6 @@
 @import "components/Flex/styles/styles";
 @import "components/FlexItem/styles/styles";
 @import "components/Input/styles/styles";
-@import "components/Image/styles/styles";
 @import "components/Joystick/styles/styles";
 @import "components/Led/styles/mixins";
 @import "components/Led/styles/styles";
@@ -47,3 +46,6 @@
 @import "components/Badge/styles/styles";
 @import "components/Dropdown/styles/styles";
 @import "components/Skeleton/styles/styles";
+@import "components/CoverEmpty/styles/styles";
+@import "components/SegmentedControl/styles/styles";
+@import "components/Stat/styles/styles";

package/src/components/Image/index.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-type Props = {
-  src: string;
-  className?: string;
-  height?: number;
-  width?: number;
-};
-
-function Image({ className = "", height = 200, width = 200, src }: Props) {
-  const classes = classNames("gc-image", className);
-
-  return (
-    <object
-      className={classes}
-      data={src}
-      type="image/jpg"
-      style={{ height, width }}
-    >
-      <div className="gc-image__fallback" />
-    </object>
-  );
-}
-
-export default Image;

package/src/components/Image/styles/_styles.scss

@@ -1,20 +0,0 @@
-.gc-image {
-  position: relative;
-  display: inline-block;
-  border: 1px solid $gb-color-component-dark;
-  padding: $radius-medium;
-  vertical-align: middle;
-
-  &__fallback {
-    background-color: $gb-color-component-light;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    height: 100%;
-
-    &::before {
-      content: "No image loaded";
-      text-align: center;
-    }
-  }
-}