@reuters-graphics/graphics-components 2.0.0 → 2.0.2

package/dist/docs/docs-components/Herbie/Herbie.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface InlineNumberProps {
+  number: number;
+  children: React.ReactNode; // Allow children to be passed
+}
+
+const InlineNumber: React.FC<InlineNumberProps> = ({ number, children }) => {
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'flex-start', // Align items at the top
+    gap: '0.5em',
+    marginTop: '1.5em',
+  };
+
+  const numberStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgb(0 156 253)',
+    color: 'white',
+    borderRadius: '50%',
+    width: '1.8em',
+    height: '1.8em',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+    flexShrink: 0, // Prevent shrinking
+  };
+
+  const textStyle: React.CSSProperties = {
+    paddingTop: '0.25em',
+    fontSize: '1em',
+    lineHeight: '1.4em', // Adjust line height for readability
+    wordBreak: 'break-word', // Handle long words gracefully
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={numberStyle}>{number}</div>
+      <div style={textStyle}>{children}</div>
+    </div>
+  );
+};
+
+export default InlineNumber;

package/dist/docs/docs-components/Highlight/Highlight.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface HighlightProps {
+    children: ReactNode;
+}
+declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

package/dist/docs/docs-components/Highlight/Highlight.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+interface HighlightProps {
+  children: ReactNode;
+}
+
+const Highlight: React.FC<HighlightProps> = ({ children }) => {
+  const style: React.CSSProperties = {
+    backgroundColor: '#FFF8DC', // Light yellow (Cornsilk)
+    padding: '0.15em 0.25em',
+    border: '1px solid rgb(255 239 177)',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', // Subtle shadow for depth
+    fontWeight: 'bold',
+  };
+
+  return <span style={style}>{children}</span>;
+};
+
+export default Highlight;

package/dist/docs/docs-components/SubtleHighlight/SubtleHighlight.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface HighlightProps {
+    children: ReactNode;
+}
+declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

package/dist/docs/docs-components/SubtleHighlight/SubtleHighlight.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+
+interface HighlightProps {
+  children: ReactNode;
+}
+
+const Highlight: React.FC<HighlightProps> = ({ children }) => {
+  const style: React.CSSProperties = {
+    backgroundColor: '#fff5cd',
+    padding: '0.15em 0.3em',
+  };
+
+  return <span style={style}>{children}</span>;
+};
+
+export default Highlight;

package/dist/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss

@@ -8,7 +8,9 @@
   }
 
   pre {
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
+    box-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.19),
+      0 6px 6px rgba(0, 0, 0, 0.23) !important;
     border: 0 !important;
     padding: 1em 1.5em !important;
   }

package/dist/docs/docs-components/syntax/nord.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+type PrismStyles = Record<string, React.CSSProperties>;
+/**
+ * Nord syntax highlighting to match syntax highlighting in .storybook/syntax.scss
+ */
+export declare const prismNord: PrismStyles;
+export {};

package/dist/docs/docs-components/syntax/nord.js

@@ -0,0 +1,155 @@
+/**
+ * Nord syntax highlighting to match syntax highlighting in .storybook/syntax.scss
+ */
+export const prismNord = {
+    'code[class*="language-"]': {
+        color: '#f8f8f2',
+        background: 'none',
+        fontFamily: "\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+        textAlign: 'left',
+        whiteSpace: 'pre',
+        wordSpacing: 'normal',
+        wordBreak: 'normal',
+        wordWrap: 'normal',
+        lineHeight: '1.5',
+        MozTabSize: '4',
+        OTabSize: '4',
+        tabSize: '4',
+        WebkitHyphens: 'none',
+        MozHyphens: 'none',
+        msHyphens: 'none',
+        hyphens: 'none',
+    },
+    'pre[class*="language-"]': {
+        color: '#f8f8f2',
+        background: '#2E3440',
+        fontFamily: "\"Fira Code\", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+        textAlign: 'left',
+        whiteSpace: 'pre',
+        wordSpacing: 'normal',
+        wordBreak: 'normal',
+        wordWrap: 'normal',
+        lineHeight: '1.5',
+        MozTabSize: '4',
+        OTabSize: '4',
+        tabSize: '4',
+        WebkitHyphens: 'none',
+        MozHyphens: 'none',
+        msHyphens: 'none',
+        hyphens: 'none',
+        padding: '1em',
+        margin: '.5em 0',
+        overflow: 'auto',
+        borderRadius: '0.3em',
+    },
+    ':not(pre) > code[class*="language-"]': {
+        background: '#2E3440',
+        padding: '.1em',
+        borderRadius: '.3em',
+        whiteSpace: 'normal',
+    },
+    comment: {
+        color: '#9199aa',
+    },
+    prolog: {
+        color: '#9199aa',
+    },
+    doctype: {
+        color: '#9199aa',
+    },
+    cdata: {
+        color: '#9199aa',
+    },
+    punctuation: {
+        color: '#81A1C1',
+    },
+    '.namespace': {
+        opacity: '.7',
+    },
+    property: {
+        color: '#81A1C1',
+    },
+    tag: {
+        color: '#81A1C1',
+    },
+    constant: {
+        color: '#81A1C1',
+    },
+    symbol: {
+        color: '#81A1C1',
+    },
+    deleted: {
+        color: '#81A1C1',
+    },
+    number: {
+        color: '#B48EAD',
+    },
+    boolean: {
+        color: '#81A1C1',
+    },
+    selector: {
+        color: '#A3BE8C',
+    },
+    'attr-name': {
+        color: '#A3BE8C',
+    },
+    string: {
+        color: '#A3BE8C',
+    },
+    char: {
+        color: '#A3BE8C',
+    },
+    builtin: {
+        color: '#A3BE8C',
+    },
+    inserted: {
+        color: '#A3BE8C',
+    },
+    operator: {
+        color: '#81A1C1',
+    },
+    entity: {
+        color: '#81A1C1',
+        cursor: 'help',
+    },
+    url: {
+        color: '#81A1C1',
+    },
+    '.language-css .token.string': {
+        color: '#81A1C1',
+    },
+    '.style .token.string': {
+        color: '#81A1C1',
+    },
+    variable: {
+        color: '#81A1C1',
+    },
+    atrule: {
+        color: '#88C0D0',
+    },
+    'attr-value': {
+        color: '#88C0D0',
+    },
+    function: {
+        color: '#88C0D0',
+    },
+    'class-name': {
+        color: '#88C0D0',
+    },
+    keyword: {
+        color: '#81A1C1',
+    },
+    regex: {
+        color: '#EBCB8B',
+    },
+    important: {
+        color: '#EBCB8B',
+        fontWeight: 'bold',
+    },
+    bold: {
+        fontWeight: 'bold',
+    },
+    italic: {
+        fontStyle: 'italic',
+    },
+};