Merge pull request #345 from woylie/more-styles

more styles
woylie · Jul 28, 2024 · ab0e82f · ab0e82f
2 parents 9caf15d + 0898e7d
commit ab0e82f
Show file tree

Hide file tree

Showing 19 changed files with 318 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,12 @@
 - Improve story and documentation.
 - Mark components as `stable`.
 
+#### Tab navigation and disclosure button component
+
+- Add styles to demo application.
+- Improve story and documentation.
+- Mark component as `refining`.
+
 #### Icon and icon sprite component
 
 - Add styles to demo application.

diff --git a/demo/assets/css/base/_typography.scss b/demo/assets/css/base/_typography.scss
@@ -1 +1,9 @@
-// todo
+@use "../functions" as f;
+
+table {
+  th,
+  td {
+    padding: f.spacer(1);
+    text-align: left;
+  }
+}
diff --git a/demo/assets/css/components/_button.scss b/demo/assets/css/components/_button.scss
@@ -10,7 +10,6 @@
   line-height: f.lines(1);
   text-decoration: none;
   cursor: pointer;
-  background: blanchedalmond;
   border: f.border-width(s) solid black;
   border-radius: f.radius(s);
 
@@ -23,6 +22,10 @@
   }
 
   &:not(:disabled, .is-disabled) {
+    &:hover {
+      filter: brightness(110%);
+    }
+
     &:active {
       filter: brightness(95%);
     }
@@ -140,4 +143,20 @@
     border-radius: f.radius(circle);
     animation: spin 0.6s linear infinite;
   }
+
+  &[aria-controls][aria-expanded] {
+    &::before {
+      display: inline-block;
+      margin-right: f.spacer(2);
+      font-size: f.size(xs);
+    }
+
+    &[aria-expanded="false"]::before {
+      content: "\25B6"; /* Right-pointing triangle (▶) */
+    }
+
+    &[aria-expanded="true"]::before {
+      content: "\25BC"; /* Down-pointing triangle (▼) */
+    }
+  }
 }
diff --git a/demo/assets/css/components/_icon.scss b/demo/assets/css/components/_icon.scss
@@ -5,7 +5,7 @@
   gap: f.spacer(1);
   align-items: baseline;
 
-  > svg {
+  svg {
     width: 0.75em;
     width: 1cap;
     height: 0.75em;

diff --git a/demo/assets/css/components/_index.scss b/demo/assets/css/components/_index.scss
@@ -20,3 +20,5 @@
 @use "button";
 @use "icon";
 @use "property-list";
+@use "skeleton";
+@use "tab-navigation";
diff --git a/demo/assets/css/components/_skeleton.scss b/demo/assets/css/components/_skeleton.scss
@@ -0,0 +1,38 @@
+@use "../functions" as f;
+
+.skeleton {
+  cursor: progress;
+  background: f.color(background, surface, "1");
+  border-radius: f.radius(m);
+
+  &.is-text-line {
+    width: 100%;
+    height: f.lines(1);
+  }
+
+  &.is-text-block {
+    width: 100%;
+    height: calc(4 * #{f.lines(1)});
+  }
+
+  &.is-image {
+    width: 100%;
+    height: 200px;
+  }
+
+  &.is-circle {
+    width: 64px;
+    height: 64px;
+    border-radius: f.radius(circle);
+  }
+
+  &.is-rectangle {
+    width: 200px;
+    height: 100px;
+  }
+
+  &.is-square {
+    width: 100px;
+    height: 100px;
+  }
+}
diff --git a/demo/assets/css/components/_tab-navigation.scss b/demo/assets/css/components/_tab-navigation.scss
@@ -0,0 +1,34 @@
+@use "../functions" as f;
+
+.tab-navigation {
+  width: 100%;
+  overflow-x: auto;
+
+  > ul {
+    display: flex;
+    gap: f.spacer(1);
+    align-items: center;
+    padding-left: f.spacer(2);
+    margin-left: 0;
+    list-style-type: none;
+    border-bottom: f.border-width(s) solid f.color(border, neutral, "1");
+
+    > li {
+      > a {
+        display: block;
+        padding: f.spacer(2) f.spacer(4);
+        color: f.color(text, secondary);
+        text-decoration: none;
+        border-top-left-radius: f.radius(m);
+        border-top-right-radius: f.radius(m);
+
+        &[aria-current] {
+          font-weight: f.weight(medium);
+          background: f.color(background, secondary);
+          border: f.border-width(s) solid f.color(border, neutral, "1");
+          border-bottom-width: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/demo/assets/tokens/color/theme.light.mjs b/demo/assets/tokens/color/theme.light.mjs
@@ -12,19 +12,19 @@ export default {
         $value: "{color.base.white}",
       },
       secondary: {
-        $value: "{color.gray.600}",
+        $value: "{color.blue.600}",
       },
       info: {
-        $value: "{color.indigo.600}",
+        $value: "{color.base.white}",
       },
       success: {
-        $value: "{color.green.500}",
+        $value: "{color.base.white}",
       },
       warning: {
-        $value: "{color.yellow.500}",
+        $value: "{color.base.white}",
       },
       danger: {
-        $value: "{color.red.500}",
+        $value: "{color.base.white}",
       },
       disabled: {
         $value: "{color.gray.200}",
@@ -34,46 +34,62 @@ export default {
       foundation: {
         $value: "{color.base.white}",
       },
+      surface: {
+        1: {
+          $value: "{color.gray.100}",
+        },
+      },
       primary: {
         $value: "{color.blue.400}",
       },
       secondary: {
-        $value: "{color.gray.0}",
+        $value: "{color.blue.0}",
       },
       info: {
-        $value: "{color.indigo.0}",
+        $value: "{color.indigo.400}",
       },
       success: {
-        $value: "{color.green.0}",
+        $value: "{color.green.400}",
       },
       warning: {
-        $value: "{color.yellow.0}",
+        $value: "{color.yellow.400}",
       },
       danger: {
-        $value: "{color.red.0}",
+        $value: "{color.red.400}",
       },
       disabled: {
         $value: "{color.gray.0}",
       },
     },
     border: {
+      neutral: {
+        1: {
+          $value: "{color.gray.100}",
+        },
+        2: {
+          $value: "{color.gray.200}",
+        },
+        3: {
+          $value: "{color.gray.300}",
+        },
+      },
       primary: {
         $value: "{color.blue.500}",
       },
       secondary: {
-        $value: "{color.gray.100}",
+        $value: "{color.blue.200}",
       },
       info: {
-        $value: "{color.indigo.100}",
+        $value: "{color.indigo.500}",
       },
       success: {
-        $value: "{color.green.100}",
+        $value: "{color.green.500}",
       },
       warning: {
-        $value: "{color.yellow.100}",
+        $value: "{color.yellow.500}",
       },
       danger: {
-        $value: "{color.red.100}",
+        $value: "{color.red.500}",
       },
       disabled: {
         $value: "{color.gray.100}",

diff --git a/demo/lib/demo_web/storybook.ex b/demo/lib/demo_web/storybook.ex
@@ -6,5 +6,5 @@ defmodule DemoWeb.Storybook do
     css_path: "/assets/app.css",
     js_path: "/assets/storybook.js",
     sandbox_class: "demo-web",
-    title: "Doggo Storybook"
+    title: "Doggo Storybook #{Mix.Project.config()[:version]}"
 end
diff --git a/demo/mix.exs b/demo/mix.exs
@@ -4,7 +4,7 @@ defmodule Demo.MixProject do
   def project do
     [
       app: :demo,
-      version: "0.1.0",
+      version: version(),
       elixir: "~> 1.14",
       elixirc_paths: elixirc_paths(Mix.env()),
       start_permanent: Mix.env() == :prod,
@@ -62,4 +62,23 @@ defmodule Demo.MixProject do
       "assets.deploy": ["cmd pnpm --dir assets build:prod", "phx.digest"]
     ]
   end
+
+  defp version do
+    with {str, _} <- System.cmd("git", ["describe", "--tags", "--always"]),
+         str = String.trim(str),
+         {:ok, version} <- Version.parse(str) do
+      version
+      |> Map.update!(:pre, fn
+        nil ->
+          nil
+
+        [pre] when is_binary(pre) ->
+          [commits | _] = String.split(pre, "-")
+          [commits]
+      end)
+      |> to_string()
+    else
+      _ -> "0.1.0"
+    end
+  end
 end
diff --git a/demo/mix.lock b/demo/mix.lock
@@ -4,7 +4,7 @@
   "cowboy": {:hex, :cowboy, "2.12.0", "f276d521a1ff88b2b9b4c54d0e753da6c66dd7be6c9fca3d9418b561828a3731", [:make, :rebar3], [{:cowlib, "2.13.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "8a7abe6d183372ceb21caa2709bec928ab2b72e18a3911aa1771639bef82651e"},
   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
   "cowlib": {:hex, :cowlib, "2.13.0", "db8f7505d8332d98ef50a3ef34b34c1afddec7506e4ee4dd4a3a266285d282ca", [:make, :rebar3], [], "hexpm", "e1e1284dc3fc030a64b1ad0d8382ae7e99da46c3246b815318a4b848873800a4"},
-  "earmark": {:hex, :earmark, "1.4.46", "8c7287bd3137e99d26ae4643e5b7ef2129a260e3dcf41f251750cb4563c8fb81", [:mix], [], "hexpm", "798d86db3d79964e759ddc0c077d5eb254968ed426399fbf5a62de2b5ff8910a"},
+  "earmark": {:hex, :earmark, "1.4.47", "7e7596b84fe4ebeb8751e14cbaeaf4d7a0237708f2ce43630cfd9065551f94ca", [:mix], [], "hexpm", "3e96bebea2c2d95f3b346a7ff22285bc68a99fbabdad9b655aa9c6be06c698f8"},
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
   "expo": {:hex, :expo, "0.5.2", "beba786aab8e3c5431813d7a44b828e7b922bfa431d6bfbada0904535342efe2", [:mix], [], "hexpm", "8c9bfa06ca017c9cb4020fabe980bc7fdb1aaec059fd004c2ab3bff03b1c599c"},
   "file_system": {:hex, :file_system, "1.0.0", "b689cc7dcee665f774de94b5a832e578bd7963c8e637ef940cd44327db7de2cd", [:mix], [], "hexpm", "6752092d66aec5a10e662aefeed8ddb9531d79db0bc145bb8c40325ca1d8536d"},

diff --git a/demo/storybook/_root.index.exs b/demo/storybook/_root.index.exs
@@ -7,9 +7,9 @@ defmodule Storybook.Root do
   def folder_icon, do: {:fa, "book-open", :light, "psb-mr-1"}
   def folder_name, do: "Storybook"
 
-  def entry("welcome") do
+  def entry("introduction") do
     [
-      name: "Welcome Page",
+      name: "Introduction",
       icon: {:fa, "hand-wave", :thin}
     ]
   end

diff --git a/demo/storybook/introduction.story.exs b/demo/storybook/introduction.story.exs
@@ -0,0 +1,66 @@
+defmodule Storybook.MyPage do
+  # See https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.Story.html for full story
+  # documentation.
+  use PhoenixStorybook.Story, :page
+
+  @version Mix.Project.config()[:version]
+
+  # def doc, do: "Welcome to Doggo"
+
+  def render(assigns) do
+    assigns = assign(assigns, :version, @version)
+
+    ~H"""
+    <div class="psb-welcome-page">
+      <p>
+        Doggo is a headless component library for Phoenix LiveView.
+        <em>Headless UI</em>
+        refers to components that provide the logic and structure needed to build user interfaces but leave the styling up to you.
+      </p>
+      <p>
+        This storybook presents the components with their default options. Some components already include example styles, while others remain unstyled and will receive example styles in the future.
+      </p>
+      <p>
+        You can override the default options, including component names, base classes, and modifier attributes such as button sizes or variants.
+      </p>
+      <p>
+        The library includes a mix task to generate storybook stories for the components configured in your application.
+      </p>
+      <p>
+        Not all components are feature-complete regarding interactivity or accessibility aspects. For details about component maturity and configuration options, please refer to the <a
+          href="https://hexdocs.pm/doggo/Doggo.Components.html"
+          target="_blank"
+        >Components documentation</a>.
+      </p>
+      <p>This storybook was compiled with Doggo <%= @version %>.</p>
+
+      <h2>Resources</h2>
+      <ul>
+        <li>
+          <a href="https://github.com/woylie/doggo" target="_blank">
+            Github repository
+          </a>
+        </li>
+        <li>
+          <a href="https://hexdocs.pm/doggo/readme.html" target="_blank">
+            Installation and usage
+          </a>
+        </li>
+        <li>
+          <a href="https://hexdocs.pm/doggo/Doggo.Components.html" target="_blank">
+            Components documentation
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://hexdocs.pm/doggo/Mix.Tasks.Dog.Gen.Stories.html"
+            target="_blank"
+          >
+            Story generator task
+          </a>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+end