v1.0.2

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.0.2
+
+- Added the `Revealer` island for abstracting the common "See more..." functionality.
+
 ## v1.0.1
 
 - Added the `InterObs` island for abstracting the native Intersection Observer

islands/InterObs/setup.ts

@@ -22,7 +22,7 @@ export type iInterObs = iComponent<HTMLDivElement> & {
   observerOptions: IntersectionObserverInit;
 };
 
-/** These are the default values of the `<Menu />` island's props. */
+/** These are the default values of the `<InterObs />` island's props. */
 const defaults: iInterObs = {
   animation: '',
   isIntersectingCb: () => null,
@@ -34,7 +34,7 @@ const defaults: iInterObs = {
 };
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/** Setup function of the `<Menu />` island. */
+/** Setup function of the `<InterObs />` island. */
 export default (props: Partial<iInterObs>) => {
   const p = apDef<iInterObs>(defaults, props);
 

islands/Revealer/index.tsx

@@ -0,0 +1,34 @@
+//   ___                  _
+//  | _ \_____ _____ __ _| |___ _ _
+//  |   / -_) V / -_) _` | / -_) '_|
+//  |_|_\___|\_/\___\__,_|_\___|_|
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////
+/**
+ * ### Revealer
+ * *Organism*
+ *
+ * This module contains the render function for the `<Revealer />` island.
+ *
+ * @module
+ */
+import { useState } from 'preact/hooks';
+import setup, { iRevealer } from './setup.ts';
+
+export default function (props: Partial<iRevealer>) {
+  const { children, fwd, actuator, ...p } = setup(props);
+  const [isRevealed, setRevealed] = useState<boolean>(false);
+
+  return (
+    <div {...p}>
+      {isRevealed ? null : (
+        <div onClick={() => setRevealed(true)}>
+          {actuator}
+        </div>
+      )}
+      <div>
+        {isRevealed ? children : null}
+      </div>
+    </div>
+  );
+}

islands/Revealer/setup.ts

@@ -0,0 +1,48 @@
+//   ___                  _           ___      _
+//  | _ \_____ _____ __ _| |___ _ _  / __| ___| |_ _  _ _ __
+//  |   / -_) V / -_) _` | / -_) '_| \__ \/ -_)  _| || | '_ \
+//  |_|_\___|\_/\___\__,_|_\___|_|   |___/\___|\__|\_,_| .__/
+//                                                     |_|
+////////////////////////////////////////////////////////////////////////////////////////////////////////
+/**
+ * This module contains the prop type, default values, and styles for the `<Revealer />` island.
+ *
+ * @module
+ */
+import { apDef, forward, o } from '../../src/utils.ts';
+import { iComponent, iFwd } from '../../src/types.ts';
+import Link from '../../components/Link/index.tsx';
+import { ComponentChild } from 'preact';
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** Properties of the `<Revealer />` island. */
+export type iRevealer = iComponent<HTMLDivElement> & {
+  actuator: ComponentChild;
+  fwd: Partial<iRevealerFwd>;
+};
+
+type iRevealerFwd = {
+  revelation: iFwd<HTMLDivElement>;
+};
+
+/** These are the default values of the `<Revealer />` island's props. */
+const defaults: iRevealer = {
+  actuator: Link({ children: 'Read more' }),
+  fwd: {
+    revelation: {},
+  },
+};
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** Setup function of the `<Revealer />` island. */
+export default (props: Partial<iRevealer>) => {
+  const p = apDef<iRevealer>(defaults, props);
+
+  p.class = o('revealer', { ...p });
+
+  p.fwd = forward({
+    revelation: 'revealer__revelation',
+  }, p.fwd);
+
+  return p;
+};