fix: caption in Figure supports React node

lsst-epo · Nov 21, 2024 · 4d4095d · 4d4095d
1 parent eb7f0fd
commit 4d4095d
Show file tree

Hide file tree

Showing 23 changed files with 100 additions and 73 deletions.
diff --git a/packages/epo-react-lib/package.json b/packages/epo-react-lib/package.json
@@ -75,7 +75,7 @@
     "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.18.6",
-    "@rubin-epo/epo-style-dictionary": "0.2.0",
+    "@rubin-epo/epo-style-dictionary": "0.2.1",
     "@rubin-epo/eslint-config-react": "^1.0.0-beta",
     "@semantic-release/github": "^10.1.7",
     "@semantic-release/npm": "^12.0.1",

diff --git a/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx b/packages/epo-react-lib/src/atomic/Figure/Figure.stories.tsx
@@ -3,6 +3,7 @@ import { children } from "@/storybook/utilities/argTypes";
 
 import Figure from ".";
 import Image from "../Image";
+import { generateCantoSrcSet } from "@/storybook/utilities/helpers";
 
 const meta: Meta<typeof Figure> = {
   component: Figure,
@@ -32,11 +33,15 @@ export const VerticalLayout: StoryObj<typeof Figure> = {
     children: (
       <Image
         image={{
-          url: "https://rubin.canto.com/direct/image/2378fnrgod2nnfha8mt8fool0q/Jn8gNFKti6C9EsMjscGaiHzWQlE/m800/800",
+          srcSet: generateCantoSrcSet(
+            "https://rubin.canto.com/direct/image/2378fnrgod2nnfha8mt8fool0q/Jn8gNFKti6C9EsMjscGaiHzWQlE/m800/",
+            4928
+          ),
+          url: "https://rubin.canto.com/direct/image/2378fnrgod2nnfha8mt8fool0q/j6VBew_jsPseN6cHtd4SD04xccU/original?content-type=image%2Fjpeg&name=Rubin_May_2022.jpg",
           altText:
             "Wide view of the Rubin Observatory facility and smaller surrounding buildings against an orange and purple twilight sky",
-          width: 800,
-          height: 530,
+          width: 4928,
+          height: 3264,
         }}
       />
     ),

diff --git a/packages/epo-react-lib/src/atomic/Figure/Figure.tsx b/packages/epo-react-lib/src/atomic/Figure/Figure.tsx
diff --git a/packages/epo-react-lib/src/atomic/Figure/index.ts b/packages/epo-react-lib/src/atomic/Figure/index.ts
diff --git a/packages/epo-react-lib/src/atomic/Figure/index.tsx b/packages/epo-react-lib/src/atomic/Figure/index.tsx
@@ -0,0 +1,58 @@
+import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
+import ConditionalWrapper from "@/utils/ConditionalWrapper";
+import * as Styled from "./styles";
+
+export interface FigureProps {
+  layout?: "horizontal" | "vertical";
+  caption?: ReactNode;
+  withBackground?: boolean;
+  className?: string;
+}
+
+const Figure: FunctionComponent<PropsWithChildren<FigureProps>> = ({
+  children,
+  caption,
+  layout = "vertical",
+  withBackground,
+  className,
+}) => {
+  const isTextCaption = typeof caption === "string";
+  const hasCaption = !!caption;
+  return (
+    <Styled.Figure
+      data-layout={layout}
+      style={
+        withBackground
+          ? {
+              "--figure-background-color":
+                "var(--color-background-tile-light, #f5f5f5)",
+              "--figure-padding": "var(--size-spacing-s, 1rem)",
+            }
+          : undefined
+      }
+      className={className}
+    >
+      <ConditionalWrapper
+        condition={layout === "horizontal"}
+        wrapper={(children) => (
+          <Styled.FloatWrapper>{children}</Styled.FloatWrapper>
+        )}
+      >
+        {children}
+      </ConditionalWrapper>
+      {isTextCaption && (
+        <Styled.FigCaption
+          data-layout={layout}
+          dangerouslySetInnerHTML={{ __html: caption }}
+        />
+      )}
+      {hasCaption && !isTextCaption && (
+        <Styled.FigCaption data-layout={layout}>{caption}</Styled.FigCaption>
+      )}
+    </Styled.Figure>
+  );
+};
+
+Figure.displayName = "Atomic.Figure";
+
+export default Figure;
diff --git a/packages/epo-react-lib/src/atomic/Figure/styles.ts b/packages/epo-react-lib/src/atomic/Figure/styles.ts
@@ -1,9 +1,8 @@
 import styled from "styled-components";
-import { ptToEm } from "@/styles/utils";
 import { BREAK_PHABLET } from "@/styles/abstracts";
 
 export const Figure = styled.figure`
-  --figcaption-gap: calc(var(--figure-padding, 20px) * 0.75);
+  --figcaption-gap: var(--figure-padding, var(--size-spacing-s, 1rem));
 
   background-color: var(--figure-background-color);
   padding: var(--figure-padding);
@@ -20,7 +19,7 @@ export const Figure = styled.figure`
 `;
 
 export const FigCaption = styled.figcaption`
-  font-size: ${ptToEm("14pt")};
+  font-size: var(--size-font-14-14, 0.875rem);
   line-height: 1.428;
 
   &[data-layout="vertical"] {

diff --git a/packages/epo-react-lib/src/index.ts b/packages/epo-react-lib/src/index.ts
@@ -10,7 +10,7 @@ export { default as CircularLoader } from "@/atomic/CircularLoader";
 export { default as ColorSwatch } from "@/atomic/ColorSwatch";
 export { default as ExpandToggle } from "@/atomic/ExpandToggle";
 export { default as ExternalLink } from "@/atomic/ExternalLink";
-export { default as Figure } from "@/atomic/Figure";
+export { default as Figure, type FigureProps } from "@/atomic/Figure";
 export {
   type ImageProps,
   type ImageShape,

diff --git a/packages/epo-react-lib/src/styles/css/global/variables.css b/packages/epo-react-lib/src/styles/css/global/variables.css
@@ -3,6 +3,14 @@
 @import "@rubin-epo/epo-style-dictionary/rubin.css";
 
 :root {
+  @utopia clamps({
+    pairs: [
+      [14, 14]
+    ],
+    prefix: "size-font",
+    relativeTo: "viewport-width",
+  });
+
   @utopia clamps({
     pairs: [
       [16, 20]

diff --git a/packages/epo-react-lib/vite.config.mts b/packages/epo-react-lib/vite.config.mts
@@ -31,7 +31,6 @@ const entry = {
   ColorSwatch: resolve(__dirname, "src/atomic/ColorSwatch/ColorSwatch.tsx"),
   ExpandToggle: resolve(__dirname, "src/atomic/ExpandToggle/ExpandToggle.tsx"),
   ExternalLink: resolve(__dirname, "src/atomic/ExternalLink/ExternalLink.tsx"),
-  Figure: resolve(__dirname, "src/atomic/Figure/Figure.tsx"),
   Link: resolve(__dirname, "src/atomic/Link/Link.tsx"),
   MixedLink: resolve(__dirname, "src/atomic/MixedLink/MixedLink.tsx"),
   ProgressBar: resolve(__dirname, "src/atomic/Progress/Bar/ProgressBar.tsx"),

diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs b/packages/epo-style-dictionary/dist/web/legacy/palette/index.cjs
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 module.exports = {

diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.css b/packages/epo-style-dictionary/dist/web/legacy/palette/index.css
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 :root {

diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts b/packages/epo-style-dictionary/dist/web/legacy/palette/index.d.ts
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const white : string;

diff --git a/packages/epo-style-dictionary/dist/web/legacy/palette/index.js b/packages/epo-style-dictionary/dist/web/legacy/palette/index.js
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const white = "#ffffff";

diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.cjs
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 module.exports = {

diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.css
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 :root {

diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.d.ts
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const FONT_STACK_BASE : string;

diff --git a/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js b/packages/epo-style-dictionary/dist/web/legacy/tokens/index.js
@@ -3,7 +3,7 @@
  * Avoid using these
  * 
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const FONT_STACK_BASE = "'Source Sans Pro', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif, system-ui";

diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.cjs b/packages/epo-style-dictionary/dist/web/rubin/index.cjs
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 module.exports = {
@@ -24,6 +24,7 @@ module.exports = {
   "COLOR_BACKGROUND_BUTTON_LINK_INACTIVE": "rgba(0, 0, 0, 0)",
   "COLOR_BACKGROUND_PAGE_PRIMARY": "#ffffff",
   "COLOR_BACKGROUND_PAGE_INVERT": "#000000",
+  "COLOR_BACKGROUND_TILE_LIGHT": "#f5f5f5",
   "COLOR_BORDER_BUTTON_PRIMARY": "rgba(0, 0, 0, 0)",
   "COLOR_BORDER_BUTTON_SECONDARY": "rgba(0, 0, 0, 0)",
   "COLOR_BORDER_BUTTON_TERTIARY": "#000000",

diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.css b/packages/epo-style-dictionary/dist/web/rubin/index.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 :root {
@@ -24,6 +24,7 @@
   --color-background-button-link-inactive: rgba(0, 0, 0, 0);
   --color-background-page-primary: #ffffff;
   --color-background-page-invert: #000000;
+  --color-background-tile-light: #f5f5f5;
   --color-border-button-primary: rgba(0, 0, 0, 0);
   --color-border-button-secondary: rgba(0, 0, 0, 0);
   --color-border-button-tertiary: #000000;

diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.d.ts b/packages/epo-style-dictionary/dist/web/rubin/index.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const COLOR_BACKGROUND_BUTTON_PRIMARY_DEFAULT : string;
@@ -23,6 +23,7 @@ export const COLOR_BACKGROUND_BUTTON_LINK_HOVER : string;
 export const COLOR_BACKGROUND_BUTTON_LINK_INACTIVE : string;
 export const COLOR_BACKGROUND_PAGE_PRIMARY : string;
 export const COLOR_BACKGROUND_PAGE_INVERT : string;
+export const COLOR_BACKGROUND_TILE_LIGHT : string;
 export const COLOR_BORDER_BUTTON_PRIMARY : string;
 export const COLOR_BORDER_BUTTON_SECONDARY : string;
 export const COLOR_BORDER_BUTTON_TERTIARY : string;

diff --git a/packages/epo-style-dictionary/dist/web/rubin/index.js b/packages/epo-style-dictionary/dist/web/rubin/index.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Sep 2024 18:37:30 GMT
+ * Generated on Wed, 20 Nov 2024 23:25:53 GMT
  */
 
 export const COLOR_BACKGROUND_BUTTON_PRIMARY_DEFAULT = "#12726d";
@@ -23,6 +23,7 @@ export const COLOR_BACKGROUND_BUTTON_LINK_HOVER = "rgba(0, 0, 0, 0)";
 export const COLOR_BACKGROUND_BUTTON_LINK_INACTIVE = "rgba(0, 0, 0, 0)";
 export const COLOR_BACKGROUND_PAGE_PRIMARY = "#ffffff";
 export const COLOR_BACKGROUND_PAGE_INVERT = "#000000";
+export const COLOR_BACKGROUND_TILE_LIGHT = "#f5f5f5";
 export const COLOR_BORDER_BUTTON_PRIMARY = "rgba(0, 0, 0, 0)";
 export const COLOR_BORDER_BUTTON_SECONDARY = "rgba(0, 0, 0, 0)";
 export const COLOR_BORDER_BUTTON_TERTIARY = "#000000";

diff --git a/packages/epo-style-dictionary/package.json b/packages/epo-style-dictionary/package.json
@@ -2,7 +2,7 @@
   "name": "@rubin-epo/epo-style-dictionary",
   "private": true,
   "description": "Rubin Observatory Education & Public Outreach team style tokens.",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": "Rubin EPO",
   "license": "MIT",
   "homepage": "https://lsst-epo.github.io/epo-react-lib",

diff --git a/packages/epo-style-dictionary/src/brand/rubin/page.json b/packages/epo-style-dictionary/src/brand/rubin/page.json
@@ -8,6 +8,11 @@
         "invert": {
           "value": "{color.neutral.100}"
         }
+      },
+      "tile": {
+        "light": {
+          "value": "{color.neutral.04}"
+        }
       }
     }
   }