feat(components) LUX Button (#163)

Wrapped Utrecht-button as LUX-button --------- Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl> Co-authored-by: AlineNap <59806622+AlineNap@users.noreply.github.com> Co-authored-by: Remy Parzinski <remypar5@users.noreply.github.com>
nl-design-system · Aug 13, 2024 · 86a6afd · 86a6afd
1 parent a1010e4
commit 86a6afd
Show file tree

Hide file tree

Showing 28 changed files with 2,656 additions and 302 deletions.
diff --git a/packages/storybook/.stylelintrc.json b/packages/storybook/.stylelintrc.json
@@ -1,6 +1,11 @@
 {
   "extends": ["stylelint-config-standard-scss"],
   "rules": {
-    "selector-class-pattern": "^(dt-[a-z]+(--[a-z]+(-[a-z])+)?|docs-story|visual-regression-wrapper|section)"
+    "selector-class-pattern": [
+      "^(sb-?|storybook-|docs-|lux-|lsb-)([a-z-]+)+$",
+      {
+        "message": "Please use the prefix `lsb-` for our custom Storybook components."
+      }
+    ]
   }
 }
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -44,15 +44,18 @@
     "@storybook/preview-api": "8.2.7",
     "@storybook/react": "8.2.7",
     "@storybook/react-vite": "8.2.7",
+    "@storybook/test": "8.2.7",
     "@storybook/testing-library": "0.2.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@utrecht/button-css": "1.2.0",
     "@vitejs/plugin-react": "4.3.1",
     "chromatic": "11.7.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "require-from-string": "2.0.2",
     "rimraf": "6.0.1",
+    "shadow-dom-testing-library": "1.11.2",
     "storybook": "8.2.7",
     "typescript": "5.5.4",
     "vite": "5.3.5"

diff --git a/packages/storybook/src/styles/theme.css b/packages/storybook/src/styles/theme.css
@@ -2,13 +2,13 @@
   background-color: var(--lux-color-background-default);
 }
 
-.visual-regression-wrapper {
+.lsb-visual-regression-wrapper {
   display: flex;
   flex-flow: column wrap;
   gap: 16px 32px;
 }
 
-.section {
+.lsb-section {
   display: flex;
   flex-direction: column;
   border: solid 1px #a7a7a7;
@@ -17,7 +17,7 @@
   list-style: none;
 }
 
-.section li {
+.lsb-section li {
   display: flex;
   justify-content: space-between;
   align-items: start;
@@ -26,25 +26,25 @@
   padding-block: 24px;
 }
 
-.section li + li {
+.lsb-section li + li {
   border-top: solid 1px #a7a7a7;
 }
 
-.dt-preview {
+.lsb-dt-preview {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   gap: var(--lux-space-1x, 0.5rem);
 }
 
-.dt-preview--spacing,
-.dt-preview--sizing {
+.lsb-dt-preview--spacing,
+.lsb-dt-preview--sizing {
   --dt-border-radius: 0;
   --dt-background-color: var(--lux-color-background-subdued);
 }
 
-.dt-preview:not(.dt-preview--font)::before {
+.lsb-dt-preview:not(.lsb-dt-preview--font)::before {
   display: inline-block;
   border-width: var(--dt-border-width, 1px);
   border-style: var(--dt-border-style, solid);
@@ -56,10 +56,41 @@
   content: "";
 }
 
-.dt-value--line-height-reset {
+.lsb-dt-value--line-height-reset {
   line-height: 1 !important;
 }
 
-.dt-set {
+.lsb-dt-set {
   text-transform: capitalize;
 }
+
+.lsb-citation {
+  display: inline-block;
+  margin-block-end: var(--lux-space-50);
+  background-color: var(--lux-color-background-subdued);
+  padding-inline: var(--lux-space-100);
+  padding-block: var(--lux-space-50);
+  font-style: normal;
+  font-size: var(--lux-font-size-s);
+  font-family: var(--lux-font-family-primary);
+
+  a {
+    color: var(--lux-color-foreground-link);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  &,
+  p {
+    color: var(--lux-color-foreground-default);
+  }
+}
+
+.lsb-story-grid {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: start;
+  gap: var(--lux-grid-gutter);
+}
diff --git a/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx b/packages/storybook/src/utils/components/DesignTokenBorderPreview.tsx
@@ -35,22 +35,22 @@ const DesignTokenBorderPreview = ({ token, value, set, group = 'border' }: Props
   return (
     <tr>
       <td>
-        <span className="dt-preview dt-preview--border" ref={bubbleElem} style={previewStyle}>
+        <span className="lsb-dt-preview lsb-dt-preview--border" ref={bubbleElem} style={previewStyle}>
           {token}
         </span>
       </td>
       {value ? (
         <td>
-          <span className="dt-value">{value}</span>
+          <span className="lsb-dt-value">{value}</span>
         </td>
       ) : (
         <td>
-          <span className="dt-value">{tokenValue}</span>
+          <span className="lsb-dt-value">{tokenValue}</span>
         </td>
       )}
       {set ? (
         <td>
-          <span className="dt-set">{set}</span>
+          <span className="lsb-dt-set">{set}</span>
         </td>
       ) : null}
     </tr>

diff --git a/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx b/packages/storybook/src/utils/components/DesignTokenColorPreview.tsx
@@ -23,7 +23,7 @@ const DesignTokenColorPreview = ({ token, reference, set }: Props) => {
     <tr>
       <td>
         <span
-          className="dt-preview"
+          className="lsb-dt-preview"
           ref={bubbleElem}
           style={{ '--dt-background-color': cssVar } as React.CSSProperties}
         >

diff --git a/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx b/packages/storybook/src/utils/components/DesignTokenFontPreview.tsx
@@ -34,25 +34,25 @@ const DesignTokenFontPreview = ({ token, value, set, reference }: Props) => {
   return (
     <tr>
       <td>
-        <span className="dt-preview dt-preview--font" ref={bubbleElem} style={previewStyle}>
+        <span className="lsb-dt-preview lsb-dt-preview--font" ref={bubbleElem} style={previewStyle}>
           {token}
         </span>
       </td>
       {!reference && value ? (
         <td className={valueClassName}>
-          <span className="dt-value dt-value--font" style={valueStyle}>
+          <span className="lsb-dt-value dt-value--font" style={valueStyle}>
             {value}
           </span>
         </td>
       ) : null}
       {reference ? (
         <td>
-          <span className="dt-reference">{reference}</span>
+          <span className="lsb-dt-reference">{reference}</span>
         </td>
       ) : null}
       {set ? (
         <td>
-          <span className="dt-set">{set}</span>
+          <span className="lsb-dt-set">{set}</span>
         </td>
       ) : null}
     </tr>

diff --git a/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx b/packages/storybook/src/utils/components/DesignTokenSizingPreview.tsx
@@ -23,15 +23,15 @@ const DesignTokenSizingPreview = ({ token, value, set }: Props) => {
   return (
     <tr>
       <td>
-        <span className="dt-preview dt-preview--sizing" ref={bubbleElem} style={style}>
+        <span className="lsb-dt-preview lsb-dt-preview--sizing" ref={bubbleElem} style={style}>
           {token}
         </span>
       </td>
       <td>
-        <span className="dt-value">{value}</span>
+        <span className="lsb-dt-value">{value}</span>
       </td>
       <td>
-        <span className="dt-set">{set}</span>
+        <span className="lsb-dt-set">{set}</span>
       </td>
     </tr>
   );

diff --git a/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx b/packages/storybook/src/utils/components/DesignTokenSpacingPreview.tsx
@@ -23,12 +23,12 @@ const DesignTokenSpacingPreview = ({ token }: Props) => {
   return (
     <tr>
       <td>
-        <span className="dt-preview dt-preview--spacing" ref={bubbleElem} style={style}>
+        <span className="lsb-dt-preview lsb-dt-preview--spacing" ref={bubbleElem} style={style}>
           {token}
         </span>
       </td>
       <td>
-        <span className="dt-value">{tokenValue}</span>
+        <span className="lsb-dt-value">{tokenValue}</span>
       </td>
     </tr>
   );

diff --git a/packages/storybook/src/utils/createVisualRegressionStory.tsx b/packages/storybook/src/utils/createVisualRegressionStory.tsx
@@ -66,5 +66,5 @@ export const VisualRegressionWrapper = ({
   children,
   className,
 }: PropsWithChildren<{ className: string }>): React.ReactElement => {
-  return <div className={`visual-regression-wrapper ${className}`}>{children}</div>;
+  return <div className={`lsb-visual-regression-wrapper ${className}`}>{children}</div>;
 };
diff --git a/packages/storybook/src/web-components/button-login/button-login.mdx b/packages/storybook/src/web-components/button-login/button-login.mdx
@@ -92,7 +92,7 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h
 
 ## State
 
-<ul className="section">
+<ul className="lsb-section">
   <li>
     <lux-button-login agent="digid"></lux-button-login>
     <span>Default</span>
@@ -113,7 +113,7 @@ Schaal het icoon mee met de hoogte van de button. Houd de button minimaal 48px h
 
 ## Agent
 
-<ul className="section">
+<ul className="lsb-section">
   <li>
     <lux-button-login agent="digid"></lux-button-login>
     <span>Digid</span>
@@ -140,7 +140,7 @@ Gebruik de onderstaande Engelse vertalingen door het `label` attribuut toe te wi
 <lux-button-login agent="digid" label="Log in"></lux-button-login>
 ```
 
-<ul className="section">
+<ul className="lsb-section">
   <li>
     <lux-button-login agent="digid" label="Log in"></lux-button-login>
     <span>Digid</span>

diff --git a/packages/storybook/src/web-components/button/button.mdx b/packages/storybook/src/web-components/button/button.mdx
@@ -0,0 +1,75 @@
+import { Canvas, Controls, Description, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/button-css/README.md?raw";
+import * as ButtonStories from "./button.stories";
+
+<Meta of={ButtonStories} />
+
+<cite className="lsb-citation">
+  Documentatie afkomstig van
+  <a href="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-button--docs">Utrecht Button</a>
+</cite>
+<Markdown>{markdown}</Markdown>
+
+## Playground
+
+<Canvas of={ButtonStories.Playground} />
+<Controls of={ButtonStories.Playground} />
+
+## Variants (appearance)
+
+Voor Lux zijn er drie varianten van de button. In de community komen ook andere varianten voor. Kies je een variant die
+niet bestaat in onze tokens dan zal je een paarse styling zien, als visuele waarschuwing.
+
+### Primary / primary action Button
+
+<Description of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Primary} />
+
+### Secondary / secondary action button
+
+<Description of={ButtonStories.Secondary} />
+<Canvas of={ButtonStories.Secondary} />
+
+### Tertiary / subtle button
+
+<Description of={ButtonStories.Tertiary} />
+<Canvas of={ButtonStories.Tertiary} />
+
+## States
+
+### Active
+
+<Description of={ButtonStories.Active} />
+<Canvas of={ButtonStories.Active} sourceState="none" />
+
+### Hover
+
+<Description of={ButtonStories.Hover} />
+<Canvas of={ButtonStories.Hover} sourceState="none" />
+
+### Focus
+
+<Description of={ButtonStories.Focus} />
+<Canvas of={ButtonStories.Focus} sourceState="none" />
+
+### Busy
+
+<Description of={ButtonStories.Busy} />
+<Canvas of={ButtonStories.Busy} sourceState="hidden" />
+
+### Toggle / Pressed
+
+<Description of={ButtonStories.Toggle} />
+<Canvas of={ButtonStories.Toggle} sourceState="hidden" />
+
+## Icons
+
+### Start Icon
+
+<Description of={ButtonStories.WithStartIcon} />
+<Canvas of={ButtonStories.WithStartIcon} sourceState="hidden" />
+
+### End Icon
+
+<Description of={ButtonStories.WithEndIcon} />
+<Canvas of={ButtonStories.WithEndIcon} sourceState="hidden" />